AngularJS $watch变量监视

 

在使用AngulaJS编写应用时，我们经常需要做的一件事情就是对模型中的变量进行监视，并对其发生的变化做出相应的回应。如：购物车小计。

AngularJS为我们提供了一个非常方便的$watch方法，它可以帮助我们在每个scope中监视其中的变量。下面是一个非常简单的例子：

Java代码 

$scope.name = 'zhangsan';

$scope.count = 0;

$scope.cart = [
    {id:1,name:'iphone5s',quantity:3,price:4300},
    {id:2,name:'iphone5c',quantity:30,price:3300},
    {id:3,name:'mac',quantity:3,price:14300},
    {id:4,name:'ipad',quantity:100,price:2000}
];// 监听一个model 当一个model每次改变时 都会触发第2个函数

$scope.$watch('name', function(newValue, oldValue) {
    // console.log(newValue+ '===' +oldValue);
    ++$scope.count;

    if ($scope.count > 3) {
        $scope.name = '已将大于3次了';
    }
});

$scope.$watch('cart', function(newValue, oldValue) {
    // console.log(newValue);
    angular.forEach(newValue, function(item, key) {
        if(item.quantity < 1) {
            var returnKey = confirm('是否从购物车内删除该产品');
            if(returnKey) {
                $scope.remove(item.id);
            }else{
                item.quantity = oldValue[key].quantity;
            }
            return ;
        }
    });
}, true); 检查被监控的对象的每个属性是否发生变化

上面的这段代码非常简单，它用$watch来对$scope中的name进行监视，并在它发生变化的时候将$rootScope中的count属性增加1。因此，每当我们对name进行一次修改时，下面显示的change count数字就会增加1,当count>3时，改变name的值。

在AngularJS内部，每当我们对ng-model绑定的name属性进行一次修改，AngularJS内部的$digest就会运行一次，并在运行结束之后检查我们使用$watch来监视的东西，如果和进行上一次$digest之前相比有了变化，则执行我们在其中绑定的处理函数。