我知道,无论Watchers与Observers就将计算在东西$scope在AngularJS变化。但是无法理解两者之间到底有什么区别。
Watchers
Observers
$scope
我最初的理解是Observers为角表达式计算的,这些角表达式是HTML端在Watchers执行$scope.$watch()函数时所执行的条件。我的想法是否正确?
$scope.$watch()
$observe() 是Attributes对象上的一种方法,因此,它只能用于观察/监视DOM属性的值更改。仅用于/调用内部指令。当您需要观察/观察包含插值的DOM属性(即{{}})时,请使用$observe。例如,attr1="Name: {{name}}"然后在指令中:attrs.$observe('attr1', ...)。 (如果您尝试scope.$watch(attrs.attr1, ...)使用{{}},则无法undefined使用-您会得到的。)将$watch用于其他所有内容。
attr1="Name: {{name}}"
attrs.$observe('attr1', ...)
scope.$watch(attrs.attr1, ...)
undefined
$ watch() 更复杂。它可以观察/观察“表达式”,其中表达式可以是函数或字符串。如果表达式是字符串,则将$parse’d(即,作为Angular表达式求值)放入函数中。(每个摘要周期都会调用此函数。)字符串表达式不能包含{{}}。$ watch是[Scope]对象上的一种方法,因此只要您可以访问Scope对象,就可以使用/调用它,因此在
因为字符串是作为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,这可能不是您想要的。)
attr1="myModel.some_prop"
scope.$watch('myModel.some_prop', ...)
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。
d1
d2
<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())。
attr1="22"
varcount=scope.$eval(attrs.attr1)
attr1="mystring"
attrs.attr1