AngularJS: разница между методами $observe и $watch

$observe () способ по атрибуты object, и как таковой, он может использоваться только для наблюдения / наблюдения за изменением значения атрибута DOM. Он используется/вызывается только внутри директив. Используйте $observe, когда вам нужно наблюдать / наблюдать атрибут DOM, содержащий интерполяцию (т. е. {{}}).
Е. Г., attr1="Name: {{name}}", затем в директиве: attrs.$observe('attr1', ...).
(если вы попробовать scope.$watch(attrs.attr1, ...) это не будет работать из-за {{}}s -- вы получите undefined.) Используйте $watch для всего остального.

$watch () сложнее. Он может наблюдать / наблюдать "выражение", где выражение может быть либо функцией, либо строкой. Если выражение является строкой, то это $ parse ' d (т. е. оценивается как Угловое выражение) в функцию. (Именно эта функция называется каждым циклом дайджеста.) Строковое выражение не может содержать {{}}. $watch-это метод на область объект, поэтому его можно использовать / вызывать везде, где у вас есть доступ к объекту области, следовательно, в

• контроллер -- любой контроллер -- один, созданный через ng-view, ng-controller или контроллер директивы
• функция связывания в директиве, так как она также имеет доступ к области

поскольку строки оцениваются как угловые выражения, $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 видит строку без {{}}.) Чтобы было легче запомнить, что использовать, когда, я предлагаю использовать $observe и для этого случая.

чтобы проверить все это, я написал Plunker это определяет две директивы. Один (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 инициируются изменениями свойств, внесенными обработчиком click.

обратите внимание, что при запуске функции link все атрибуты, содержащие {{}}, еще не оцениваются (поэтому при попытке проверить атрибуты, вы получите undefined). Единственный способ увидеть интерполированные значения-использовать $observe (или $watch, если используется область изолирования с"@"). Таким образом, получение значений этих атрибутов является асинхронные операции. (И именно поэтому нам нужны функции $observe и $watch.)

иногда вам не нужно $observe или $watch. Например, если ваш атрибут содержит число или логическое значение (не строку), просто оцените его один раз: attr1="22", тогда, скажем, ваш функция связывания:var count = scope.$eval(attrs.attr1). Если это просто постоянная строка – attr1="my string" – тогда просто использовать attrs.attr1 в вашей директиве (нет необходимости в $eval ()).

см. также сообщение группы Google Vojta около $ watch выражения.