在使用AngulaJS编写应用时,我们经常需要做的一件事情就是对模型中的变量进行监视,并对其发生的变化做出相应的回应。如:购物车小计。
AngularJS为我们提供了一个非常方便的$watch方法,它可以帮助我们在每个scope中监视其中的变量。下面是一个非常简单的例子:
$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之前相比有了变化,则执行我们在其中绑定的处理函数。
相关推荐
本文实例总结了AngularJS中$apply方法和$watch方法用法。分享给大家供大家参考,具体如下: 引言 最近在项目中封装控件的时候用到了$watch方法来监听module中的值的变化,当时小编对这个方法不是很了解,所以在网上...
主要介绍了angularjs 中$apply,$digest,$watch详解的相关资料,需要的朋友可以参考下
主要介绍了AngularJs $parse、$eval和$observe、$watch的相关资料,需要的朋友可以参考下
$watch方法,它可以帮助我们在每个scope中监视其中的变量。 $watch 单一的变量 对于普通的变量时,如数字,字符串等,直接如下写是可以监视到变量的变化,并执行相应的函数的。 $scope.count=1; $scope.$watch('...
在绑定$scope中的变量到view的时候,AngularJS自动在内部创建一个”Watch”。”Watch”用于监听AngularJS scope中变量的改变。可以通过调用$scope.$watch()这个方法来创建”Watch”。 $scope.$digest()函数会循环...
相信使用过Angular的小伙伴应该对$watch这个监听不陌生,它主要用于监听模型的变化,当你的模型部分发生变化时它会通知你。我在最近的平台管理开发中,也用到这个牛逼哄哄的Angular,在做filter的时候不可以避免的...
如果你只想知道结论: $scope.$watch($rootScope.xxx,function(newVal,oldVal){ //do something }) 马上就有人问为什么不是: $rootScope.$watch("xxx",...而我的这个全局变量恰好是订单信息,也就是说不同的 contro
整理文档,搜刮出一个angularJs使用$watch和$filter过滤器制作搜索筛选,稍微整理精简一下做下分享。 搜索: <input type=text ng-model=search> 编号 点击数 标题 (k,v)> <td
主要介绍了AngularJS双向数据绑定原理之$watch、$apply和$digest的应用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
主要介绍了AngularJS中watch监听用法,较为详细的分析了$watch的具体功能、相关参数用法与使用注意事项,需要的朋友可以参考下
$Watch:(监听一个model,当一个model每次改变时,都会触发第二个函数) $watch(‘watchFn’,watchAction,deepWatch) watchFn:带有Angular 表达式或者函数的字符串,它会返回被监控的数据模型的当前值。 watchAction...
Bookmarklet:在 AngularJS 中计算活动的 $watch() 绑定(在) 下面是一个书签,它将计算当前页面上 $watch() 绑定的数量。 每个 $watch() 绑定代表 AngularJS 在每个 $digest 阶段必须执行的处理开销。 通过减少...