Question

我刚开始使用angular并尝试理解作用域API中的$watch函数。这是我的JS小提琴的链接：

var myApp = angular.module('myApp1', []);
angular.element(document).ready(function() {
         angular.bootstrap(document, ['myApp1']);    
});
function MyController($scope){
         var mc = this;
         mc.focus = {
            'name' :false,
            'email':false
           };

   $scope.$watch(mc.focus,function(oldVal,newVal){
     console.log(oldVal);
     console.log(newVal);
    },false);
    mc.allFilled = false;
    mc.setFocus = function(prop) {
       mc.focus[prop] = true;
    };
};    
myApp.controller("MyController",MyController);

我想做什么：

1）我有4个输入只包含一个上面的链接，以简洁和演示。

2）每个输入在焦点对象中都有对应的键，初始值为false。

3）只要使用setFocus()函数关注适当的输入元素，我就会在焦点对象中将属性值更改为true

4）只要焦点对象中的所有属性都具有真值，我想将allFilled属性更改为true。

我想在这里做什么：为了实现我想做的事情，我正在观看焦点对象，在监听器中，我将检查所有属性是否值为true。如果是，我将更改allFilled属性/或做其他事情。

我知道也许我可以在setFocus()本身执行上述逻辑，但想尝试$watch 1）是否可以使用$watch执行此操作？ 2）为什么我的$watch没有被调用？ 3）Angular中最好的方法是什么？

Answer 1

代码中有两个错误。

范围。$ watch文档说，第一个参数只能是字符串或功能。您不应该传递变量，除非它们的值是其中之一。
由于您正在观察对象属性的变化，因此$ watch的第三个参数应设置为 true ：

false - 通过refenece equality来比较对象，例如。 oldVal === newVal。由于对象相同，因此找不到更改。

true - 查找对象中所有属性的更改。由于属性值已更改，因此将关闭观察程序。

Answer 2

手表需要一个字符串表达式，如下所示：

$scope.$watch('mc.focus' ,function(oldVal,newVal){
    console.log(oldVal);
    console.log(newVal);
},false);

现在它会运行。

您还需要在输入上设置ng-model以使其正常工作。

小提琴：http://jsfiddle.net/kn40tp2x/46/

Answer 3

嗯，问题是你没有将你的输入元素链接到任何范围对象。应该是。

<input type="text" ng-focus="mc.setFocus('name')" ng-model="mc.focus" />
  {{mc.allFilled}}
  {{mc.focus}}
</div>

只有在输入上设置焦点时才会调用ng-focus方法，它没有说明与i链接的内容正如@Chrillewoodz指出的那样，它应该是一个字符串，但无论如何在输入上都有一个ng-model是好的。

$ model属性更改时未调用$ watch

3 个答案: