AngularJS. Отслеживание изменений данных с помощью $watch()

Категория: AngularJS

Задача: Нам нужно выполнить некоторые действия (запустить функцию) при изменении определенного свойства объекта.

Сигнатура метода $watch():

$deregistrationFn = $watch(watchExpression, listenerHandler, [objectEquality]);
watchExpression (String | Function)
Имя наблюдаемой переменной или ф-ция, которая возвращает наблюдаемое значение.
listenerHandler (Function)
Callback ф-ция, которая будет обрабатывать каждое изменение watchExpression.
objectEquality (Boolean)
Сравнивать объекты при помощи angular.equals вместо сравнения по ссылке? По умолчанию проверяется равенство ссылок на объект. Подробнее.
objectEquality

Значение true для аргумента objectEquality может привести к утечке памяти и снижению производительности при наблюдении за сложными объектами!

$watch()

Регистрация слушателя (listener):

var APP = window.APP = angular.module('app', ['ngRoute']);

APP.controller('MyController', function($scope, $rootScope) {
  $scope.filter = {
    env: null
  };

  var listenerHandler = function (newValue, oldValue, scope) {
    if (newValue === oldValue) {
      return;
    };

    // CODE

    // Выполняем некие действия, если наблюдаемые данные изменились
  };
  
  $watch('filter.env', listenerHandler);
});

В качестве watchExpression можно указать ф-цию, которая будет возвращать наблюдаемое значение:

$scope.$watch(function(scope) {
  return scope.watchVariable1 - scope.watchVariable2;
}, function(newValue, oldValue) {
  // handle changes
});

$watchGroup()

Сигнатура метода:

$deregistrationAllFn = $scope.$watchGroup(arrayWatchExpressions, listenerHandler);
arrayWatchExpressions (Array)
Массив наблюдаемых выражений (watchExpression), каждый из которых будет отслеживаться с помощью $watch().

$watchCollection()

Отслеживает изменения только структуры коллекции (хеш-объекта, Map Object) или массива (Array). Не проверяет изменение свойств вложенных в коллекцию элементов.

Сигнатура метода:

$deregistrationFn = $watchCollection(watchObject, listenerHandler);
watchObject (Object | Array)
Наблюдаемая коллекция объектов (хеш-объект) или массив.

#watch, #bind listener, #watch collection, #watch group, #digest

категория: AngularJS