AngularJS：在$区别观察和$观看方法 [英] AngularJS : Difference between the $observe and $watch methods

问题描述

我知道这两个看守和观察员是尽快在 $的东西计算范围在AngularJS变化。但不明白究竟是两者之间的区别。

I know that both Watchers and Observers are computed as soon as something in $scope changes in AngularJS. But couldn't understand what exactly is the difference between the two.

我最初的理解是，观察员计算的角度EX pressions这些都对HTML侧条件，其中如看守执行时 $范围。$表（）函数执行。我在想是否正确？

My initial understanding is that Observers are computed for angular expressions which are conditions on the HTML side where as Watchers executed when $scope.$watch() function is executed. Am I thinking properly?

推荐答案

<一个href=\"https://docs.angularjs.org/api/ng.$compile.directive.Attributes#$observe\">$observe()是href=\"http://docs.angularjs.org/api/ng.$compile.directive.Attributes\">属性的对象的结果例如， ATTR1 =姓名：{{名}}，然后在指令： ATTRS观察$（'ATTR1'， ...）。
结果（如果你尝试 $范围手表（attrs.attr1，...）也不会因为{{}}的工作 - 你将获得未定义）。使用$监视一切。

$observe() is a method on the Attributes object, and as such, it can only be used to observe/watch the value change of a DOM attribute. It is only used/called inside directives. Use $observe when you need to observe/watch a DOM attribute that contains interpolation (i.e., {{}}'s).
E.g., attr1="Name: {{name}}", then in a directive: attrs.$observe('attr1', ...).
(If you try scope.$watch(attrs.attr1, ...) it won't work because of the {{}}s -- you'll get undefined.) Use $watch for everything else.

$腕表（） 是比较复杂的。它可以观察/看的EX pression，其中前pression可以是一个函数或字符串。如果EX pression是一个字符串，它是 $解析'D（即评估作为角前pression ）成一个函数。 （这是这个函数被调用每一个消化周期。）字符串前pression不能包含{{}}的。 $腕表是范围对象的方法，所以它可以用来/被叫，无论你有机会一个范围对象，因此，在

$watch() is more complicated. It can observe/watch an "expression", where the expression can be either a function or a string. If the expression is a string, it is $parse'd (i.e., evaluated as an Angular expression) into a function. (It is this function that is called every digest cycle.) The string expression can not contain {{}}'s. $watch is a method on the Scope object, so it can be used/called wherever you have access to a scope object, hence in

• 控制器 - 任何控制器 - 一个通过NG-来看，NG-控制器或指令控制器创建


• 在指令一个连接函数，因为这可以访问一个范围，以及

由于字符串作为前角pressions评估，当你想观察/观看模式/ scope属性$腕表经常使用。例如， ATTR1 =myModel.some_prop，然后在控制器或链接功能： $范围手表（'myModel.some_prop'.. 。）或范围。$腕表（attrs.attr1，...）（或范围。$腕表（ATTRS ['ATTR1']，...））。
结果（如果你尝试 ATTRS。观察$（'ATTR1'）你会得到字符串 myModel.some_prop ，这可能不是你想要的。）

Because strings are evaluated as Angular expressions, $watch is often used when you want to observe/watch a model/scope property. E.g., attr1="myModel.some_prop", then in a controller or link function: scope.$watch('myModel.some_prop', ...) or scope.$watch(attrs.attr1, ...) (or scope.$watch(attrs['attr1'], ...)).
(If you try attrs.$observe('attr1') you'll get the string myModel.some_prop, which is probably not what you want.)

作为评论对@ PrimosK的回答讨论，所有的$观察和$表检查每个消化周期。

As discussed in comments on @PrimosK's answer, all $observes and $watches are checked every digest cycle.

与分离范围指令更加复杂。如果使用@语法，你可以观察到$的或$观看的包含插DOM属性（即{{}}的）。 （它与$手表的原因，是因为@语法确实在插我们，因此$手表看到一个字符串，不{{}}的。）为了方便记住哪个时候，我建议使用$遵守的这种情况下使用。

Directives with isolate scopes are more complicated. If the '@' syntax is used, you can $observe or $watch a DOM attribute that contains interpolation (i.e., {{}}'s). (The reason it works with $watch is because the '@' syntax does the interpolation for us, hence $watch sees a string without {{}}'s.) To make it easier to remember which to use when, I suggest using $observe for this case also.

要帮助测试了这一切，我写了一个 Plunker 定义了两个指令。一（ D 1 ）不会创建一个新的范围，其他的（ D 2 ）创建一个分离的范围。每个指令有这六个属性。每个属性既是$ observe'd和$ watch'ed。

To help test all of this, I wrote a Plunker that defines two directives. One (d1) does not create a new scope, the other (d2) creates an isolate scope. Each directive has the same six attributes. Each attribute is both $observe'd and $watch'ed.

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

查看控制台日志，看看$之间的差异观察，并在链接功能$观看。然后点击链接，看看哪些$观察和$手表由click处理程序所做的属性更改触发的。

Look at the console log to see the differences between $observe and $watch in the linking function. Then click the link and see which $observes and $watches are triggered by the property changes made by the click handler.

注意，当链接功能运行时，包含{{}}的还没有进行评估（所以如果你尝试检查属性，你会得到任何属性未定义）。看插值的唯一方法是使用$观察（或$如果看使用带隔离范围，@）。因此，获得这些属性的值是一个的异步的操作。 （这就是为什么我们需要$观察和$手表功能。）

Notice that when the link function runs, any attributes that contain {{}}'s are not evaluated yet (so if you try to examine the attributes, you'll get undefined). The only way to see the interpolated values is to use $observe (or $watch if using an isolate scope with '@'). Therefore, getting the values of these attributes is an asynchronous operation. (And this is why we need the $observe and $watch functions.)

有时候，你并不需要$观察或$观看。例如，如果你的属性包含一个数字或一个布尔值（不是字符串），只评估一次： ATTR1 =22，那么，也就是说，你的链接功能： 变种数=范围。$的eval（attrs.attr1）。如果它仅仅是一个常量字符串＆ndash的; ATTR1 =我的字符串＆ndash的;然后只使用 attrs.attr1 在你的指令（不需要$的eval（））。

Sometimes you don't need $observe or $watch. E.g., if your attribute contains a number or a boolean (not a string), just evaluate it once: attr1="22", then in, say, your linking function: var count = scope.$eval(attrs.attr1). If it is just a constant string – attr1="my string" – then just use attrs.attr1 in your directive (no need for $eval()).

又见 Vojta开发的谷歌组帖子约$看前pressions。

See also Vojta's google group post about $watch expressions.

这篇关于AngularJS：在$区别观察和$观看方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！