AngularJS
Как работает привязка данных

замечания

Пример привязки данных

<p ng-bind="message"></p>

Это «сообщение» должно быть привязано к области контроллера текущего элемента.

$scope.message = "Hello World";

В более поздний момент, даже если модель сообщения обновлена, это обновленное значение отражается в элементе HTML. Когда угловые компиляции, шаблон «Hello World» будет прикреплен к внутреннемуHTML текущего мира. Угловая поддерживает механизм наблюдения всех директив, направленных на представление. Он имеет механизм Digest Cycle, в котором он выполняет итерацию через массив Watchers, он обновит элемент DOM, если произойдет изменение предыдущего значения модели.

Периодически не проверяется, есть ли какие-либо изменения в Объектах, прикрепленных к нему. Наблюдаются не все объекты, привязанные к области. Сфера действия прототипически поддерживает $$ WatchersArray . Scope выполняет только итерацию через этот WatchersArray, когда вызывается $ digest.

Угловая добавляет наблюдателя к WatchersArray для каждого из этих

1. {{expression}} - В ваших шаблонах (и где-нибудь еще, где есть выражение) или когда мы определяем ng-model.
   
2. $ scope. $ watch ('expression / function'). В вашем JavaScript мы можем просто прикрепить объект области для углового просмотра.

Функция $ watch принимает три параметра:

1. Первая - это функция наблюдателя, которая просто возвращает объект, или мы можем просто добавить выражение.
   

2. Вторая - это функция прослушивателя, которая будет вызываться при изменении объекта. В этой функции будут реализованы все такие вещи, как изменения DOM.
   

3. Третий - необязательный параметр, который принимает логическое значение. Если его истинная, угловая глубокая наблюдает за объектом, и если его ложный угловой просто делает ссылку на объект. Грубая реализация $ watch выглядит так:

Scope.prototype.$watch = function(watchFn, listenerFn) {
   var watcher = {
       watchFn: watchFn,
       listenerFn: listenerFn || function() { },
       last: initWatchVal  // initWatchVal is typically undefined
   };
   this.$$watchers.push(watcher); // pushing the Watcher Object to Watchers  
};

В Angular называется Digest Cycle. Цикл $ digest начинается в результате вызова $ scope. $ Digest (). Предположим, что вы изменили модель $ scope в функции обработчика с помощью директивы ng-click. В этом случае AngularJS автоматически запускает цикл $ digest, вызывая $ digest (). В дополнение к ng-click есть несколько других встроенных директив / служб, которые позволяют вам изменять модели (например, ng-model, $ timeout и т. Д.), и автоматически запускает цикл $ digest. Грубая реализация $ digest выглядит так.

Scope.prototype.$digest = function() {
      var dirty;
      do {
          dirty = this.$$digestOnce();
      } while (dirty);
}
Scope.prototype.$$digestOnce = function() {
   var self = this;
   var newValue, oldValue, dirty;
   _.forEach(this.$$watchers, function(watcher) {
          newValue = watcher.watchFn(self);
          oldValue = watcher.last;   // It just remembers the last value for dirty checking
          if (newValue !== oldValue) { //Dirty checking of References 
   // For Deep checking the object , code of Value     
   // based checking of Object should be implemented here
             watcher.last = newValue;
             watcher.listenerFn(newValue,
                  (oldValue === initWatchVal ? newValue : oldValue),
                   self);
          dirty = true;
          }
     });
   return dirty;
 };

Если мы используем функцию setTimeout () JavaScript для обновления модели области, у Angular нет возможности узнать, что вы можете изменить. В этом случае мы несете ответственность за вызов $ apply () вручную, который запускает цикл $ digest. Аналогично, если у вас есть директива, которая устанавливает прослушиватель событий DOM и меняет некоторые модели внутри функции обработчика, вам необходимо вызвать $ apply (), чтобы гарантировать, что изменения вступят в силу. Большая идея $ apply заключается в том, что мы можем выполнить некоторый код, который не знает Angular, этот код все еще может изменить ситуацию в области. Если мы применим этот код в $ apply, он позаботится о вызове $ digest (). Грубая реализация $ apply ().

Scope.prototype.$apply = function(expr) {
       try {
         return this.$eval(expr); //Evaluating code in the context of Scope
       } finally {
         this.$digest();
       }
};