AngularJS $watch变量监视

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

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

Java代码  

1. $scope.name = 'zhangsan';  
2.   
3. $scope.count = 0;  
4.   
5. $scope.cart = [  
6.     {id:1,name:'iphone5s',quantity:3,price:4300},  
7.     {id:2,name:'iphone5c',quantity:30,price:3300},  
8.     {id:3,name:'mac',quantity:3,price:14300},  
9.     {id:4,name:'ipad',quantity:100,price:2000}  
10. ];  
11.   
12. // 监听一个model 当一个model每次改变时 都会触发第2个函数  
13. $scope.$watch('name', function(newValue, oldValue) {  
14.     // console.log(newValue+ '===' +oldValue);  
15.     ++$scope.count;  
16.   
17.     if ($scope.count > 3) {  
18.         $scope.name = '已将大于3次了';  
19.     }  
20. });  
21.   
22. $scope.$watch('cart', function(newValue, oldValue) {  
23.     // console.log(newValue);  
24.     angular.forEach(newValue, function(item, key) {  
25.         if(item.quantity < 1) {  
26.             var returnKey = confirm('是否从购物车内删除该产品');  
27.             if(returnKey) {  
28.                 $scope.remove(item.id);  
29.             }else{  
30.                 item.quantity = oldValue[key].quantity;  
31.             }  
32.             return ;  
33.         }  
34.     });  
35. }, true); ////检查被监控的对象的每个属性是否发生变化  

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

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