模型属性更改时未调用 $watch

Question

我只是从 Angular 开始，并试图了解作用域 API 中的 $watch 函数。这是我的 JS fiddle 的链接：

JS Fiddle Watch demo Not working

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

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

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

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

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

代码中有两个错误。

1. scope.$watch 文档说，第一个参数只能是 string 或 function。您不应该传递变量，除非它们的值是其中之一。

2. 由于您正在观察对象属性的变化，因此 $watch 的第三个参数应设置为 true：

false - 通过引用相等比较对象，例如。旧值 === 新值。由于对象相同，所以没有发现变化。

true - 查找对象中所有属性的更改。由于属性的值发生了变化，观察者将被触发。