栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

AngularJS:$ observe和$ watch方法之间的区别

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

AngularJS:$ observe和$ watch方法之间的区别

$observe()
是Attributes对象上的一种方法,因此,它只能用于观察/监视DOM属性的值更改。仅用于/调用内部指令。当您需要观察/观察包含插值的DOM属性(即{{}})时,请使用$observe。例如,

attr1="Name: {{name}}"
然后在指令中:
attrs.$observe('attr1', ...)
。 (如果您尝试
scope.$watch(attrs.attr1, ...)
使用{{}},则无法
undefined
使用-您会得到的。)将$watch用于其他所有内容。

$ watch()
更复杂。它可以观察/观察“表达式”,其中表达式可以是函数或字符串。如果表达式是字符串,则将$parse’d(即,作为Angular表达式求值)放入函数中。(每个摘要周期都会调用此函数。)字符串表达式不能包含{{}}。$
watch是[Scope]对象上的一种方法,因此只要您可以访问Scope对象,就可以使用/调用它,因此在

  • 一个控制器-任何控制器-一个通过ng-view,ng-controller或指令控制器创建的控制器
  • 指令中的链接函数,因为它也可以访问作用域

因为字符串是作为Angular表达式求值的,所以当您要观察/观察模型/作用域属性时,通常使用$
watch。例如,

attr1="myModel.some_prop"
然后在控制器或链接功能中:
scope.$watch('myModel.some_prop',...)
scope.$watch(attrs.attr1, ...)
(或
scope.$watch(attrs['attr1'], ...)
)。
(如果尝试
attrs.$observe('attr1')
,将得到字符串
myModel.some_prop
,这可能不是您想要的。)

如对@PrimosK答案的评论中所述,每个摘要周期都会检查所有$observes和$ watches 。

具有单独作用域的指令更加复杂。如果使用“@”语法,则可以$observe或$watch包含插值(即{{}})的DOM属性。(它与$watch一起使用的原因是因为’@’语法为我们进行了插值,因此$
watch看到的字符串中没有{{}}。)为了更容易记住何时使用哪个字符串,我建议使用$在这种情况下也要观察。

为了帮助测试所有这些,我编写了一个Plunker,它定义了两个指令。一个(

d1
)不创建新的作用域,另一个(
d2
)创建隔离的作用域。每个指令具有相同的六个属性。每个属性都是$observe’d和$ watch’ed。

<div d1 attr1="{{prop1}}-test" attr2="prop2" attr3="33" attr4="'a_string'"        attr5="a_string" attr6="{{1+aNumber}}"></div>

查看控制台日志以查看链接功能中$observe和$watch之间的区别。然后单击链接,查看单击处理程序所做的属性更改触发了哪些$ observes和$watches。

请注意,在运行链接功能时,尚未评估任何包含{{}}的属性(因此,如果您尝试检查这些属性,则会得到

undefined
)。查看插值的唯一方法是使用$observe(如果使用带’@’的隔离范围,则使用$watch)。因此,获取这些属性的值是 异步 操作。(这就是为什么我们需要$ observe和$watch函数。)

有时您不需要$ observe或$watch。例如,如果您的属性包含数字或布尔值(不是字符串),则只需对其进行一次评估:

attr1="22"
,然后在您的链接函数:中进行评估
varcount=scope.$eval(attrs.attr1)
。如果它只是一个常量字符串–
attr1="mystring"
–则只需
attrs.attr1
在您的指令中使用(不需要$ eval())。



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/411338.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号