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

Question

我刚从 angular 开始，并试图理解范围 API 中的 $watch 函数。这是我的 JS fiddle 的 link :

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 个输入，上面只包括一个 link。

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

3) 只要使用 setFocus() 函数

聚焦适当的输入元素，我就会将焦点对象中的属性值更改为 true

4) 一旦焦点对象中的所有属性都具有真值，我想将 allFilled 属性更改为真。

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

我知道也许我可以在 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 才能使这项工作正常进行。

Fiddle: http://jsfiddle.net/kn40tp2x/46/

Answer 3

代码中有两个错误。

scope.$watch 文档说，第一个参数只能是 string 或 function。你不应该传递变量，除非它们的值是其中之一。
由于您正在观察对象属性的变化，$watch 的第三个参数应设置为 true:

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

true - 查找对象中所有属性的更改。由于属性的值已更改，观察者将被解雇。

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

$watch not called when model property changes

angularjs

angularjs-scope

watch

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

$watch not called when model property changes

angularjs

angularjs-scope

watch

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