AngularJS $watch变量监视

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

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

Java代码  AngularJS $watch变量监视
  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之前相比有了变化,则执行我们在其中绑定的处理函数。

上一篇:苹果推视频分享工具Clips 靠模仿挑战Snapchat


下一篇:SegmentFault D-Day 全国巡回沙龙启动——做出纯粹的技术分享文化