工作学习记录--angularjs 中的$watch与$observe监听区别
来源:互联网 发布:intent传递数据方式 编辑:程序博客网 时间:2024/05/19 09:02
angularjs中的监听,都知道的有$watch,还有一种监听是$observe,$watch主要监听的是$scope上的属性,而$observe监听的是directive中attrs上的属性。
$watch的使用方法如下
$watch(watchExpression, listener, objectEquality);
每个参数的说明如下:
watchExpression:监听的对象,它可以是一个angular表达式如'name',或函数如function(){return $scope.name}。
listener:当watchExpression变化时会被调用的函数或者表达式,它接收3个参数:newValue(新值), oldValue(旧值), scope(作用域的引用)
objectEquality:是否深度监听,如果设置为true,它告诉Angular检查所监控的对象中每一个属性的变化. 如果你希望监控数组的个别元素或者对象的属性而不是一个普通的值, 那么你应该使用它
$observe 主要是监听 attr上的属性,源代码如下:
$observe: function(key, fn) { var attrs = this, $$observers = (attrs.$$observers || (attrs.$$observers = {})), listeners = ($$observers[key] || ($$observers[key] = [])); listeners.push(fn); $rootScope.$evalAsync(function() { if (!listeners.$$inter) { // no one registered attribute interpolation function, so lets call it manually fn(attrs[key]); } }); return fn;}
从这里可以看出来它是使用了$rootScope.$evalAsync()方法来监控的。什么是$evalAsync呢?是一个异步解析的操作,是在其他表达式都已经解析之后再解析,这样使它拥有了处理像{{}}插值字符串的机会。$observe是属性对象上的方法,因此它是用来监控DOM属性上的值的变化,它仅用在指令内部,当你需要在指令内部监控包含有插值表达式的DOM属性的时候,就要用到这个方法,比如,<code>attr1="Name:{{name}}"</code>,然后在指令里面:<code>attrs.$observe('attr1', ....)</code>,但是假如你只用<code>scope.$watch(attrs.attr1,...)</code>,这种情况下是无效的,因为<code>{{}}</code>无法被解析,所以你得到的是<code>undefined</code>, 在其他情况下用$watch。
参考文献:http://www.ngnice.com/posts/2314014da4eea8
为自己工作中学习到的东西做个记录,让大家看看有什么不对的地方,相互交流,仅此而已。
- 工作学习记录--angularjs 中的$watch与$observe监听区别
- angularJs 中的$watch与$apply
- angularjs $watch监听模型变化
- $watch--angularJs的监听事件
- angular attrs.$observe和$scope.$watch的区别
- 谈谈AngularJS中的$watch
- angularjs中的$watch
- angularjs中的$watch
- 《AngularJS》----$apply 与 $watch
- 深究AngularJS——监听模型$watch
- angularjs 用$watch监听模型变化
- angularjs中的$degist,$watch,$apply
- angular $watch学习(监听数组)
- angularjs的$watch、$watchGroup、$watchCollection的区别
- angularjs中的$watch,对对象进行监视
- angularjs的监听方法$watch、$watchGrou、$watchCollection的使用方法
- angularJS $scope的$watch方法监听model改变
- Angular的侦察兵:$watch()和$observe()
- Altium Designer的几种常用布线技巧
- android数据库更新简介
- @RequestMapping 用法详解之地址映射(转)
- tomcat启动很慢很慢,长达122873ms
- 内存溢出的几种可能
- 工作学习记录--angularjs 中的$watch与$observe监听区别
- 第十四周项目1(3)——验证二叉排序树相关算法
- java springmvc mybaits maven shiro mysql 后台框架
- 第十四周 项目1 验证分块查找算法
- iOS多线程到底不安全在哪里?
- ubuntu 使用samba挂载网络文件
- 详解Android Drawable
- 计算机导论3--学科与专业
- Vue学习(二)自定义指令