脚本宝典收集整理的这篇文章主要介绍了Angular的侦察兵:$watch()和$observe(),脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
我也是因为一直不怎么了解这两个方法到底如何使用,所以就花功夫了解了一下;写下一点东西,如果什么时间忘记了,也比较好查找。
-
首先我们来说一说它们两个的使用场景:
-
$watch()
-
$observe()
$observe()
是angular
指令中link
函数中实例属性
即(iAttr
)的一个方法。
只可以在指令中使用,也是在指令的link
函数中使用。
它只能够监测angular expression
的变化,监测的方式和上面$watch()
监测angular expression
的方式一样。
-
然后我们来说一说它们的区别:
-
在控制器
中
因为在控制器
中是不推荐使用$watch()
的,所以我们稍后的一些讨论主要都是在指令
中讨论的。
-
指令(不使用隔离的作用域)
在不使用隔离的作用域的指令
中,$watch()
只能够监测不带有插值标记的angular expression
,比如在<div attr1='expr' attr2='{{expr}}'></div>
中,只可以监测attr1='expr'
中的attr1
,监测attr2
只能够得到一个undefined
,因为存在{{}}
插值符号。
在不使用隔离的作用域的指令
中,$observe()
只能够监测带有插值标记的angular expression
,比如在<div attr1='expr' attr2='{{expr}}'></div>
中,只可以监测attr2='{{expr}}'
中的attr2
,监测attr1
只会得到一个一成不变的字符串expr
。
-
指令(使用隔离的作用域)
在使用隔离的作用域的指令中
,$watch()
也可以监测带有插值标记的angular expression
;因为使用了@
或者=
前缀标识符,它们已经帮我们实现了插值
,所以可以这样使用。
-
下面我们来看一个例子:
-
一些建议
监测元素的属性值的时候,是可以使用angular-styleguide但是,会有一些问题,我第一次写示例的时候遇到了一些错误;比如刚开始我使用了controllerAs
语法,就是用了MyController as vm
并且将监测的一些属性中的变量都使用vm.prop
,这样一来就出出现了一些错误,所以我在写这个demo的时候一些地方没有遵循angular-styleguide。
关于结果中出现undefined
的解释,因为指令优先级别高于控制器,所以在指令中使用$watch()
时,如果监测的表达式其中含有{{}}
那么会出现undefined
,因为在监测的时候插值字符串中的变量还没有被解析。但是在使用隔离作用域的指令中是可以的,因为@
和=
已经帮助我们实现了变量的解析。
-
参考的资料
stackoverflow上的Difference between the $observe and $watch methods,相应的代码我拷贝了一份,因为访问他的原链接还是有点困难的,拷贝的那一份在这里
以上是脚本宝典为你收集整理的Angular的侦察兵:$watch()和$observe()全部内容,希望文章能够帮你解决Angular的侦察兵:$watch()和$observe()所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。