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

时间:2015-07-08 21:08:07

标签: angularjs angularjs-scope watch

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

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中最好的方法是什么?

3 个答案:

答案 0 :(得分:3)

代码中有两个错误。

  1. 范围。$ watch文档说,第一个参数只能是字符串功能。您不应该传递变量,除非它们的值是其中之一。

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

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

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

答案 1 :(得分:1)

手表需要一个字符串表达式,如下所示:

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

现在它会运行。

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

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

答案 2 :(得分:0)

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

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

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