AngularJS
Cómo funciona el enlace de datos

Observaciones

Ejemplo de enlace de datos

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

Este 'mensaje' debe adjuntarse al alcance del controlador de elementos actual.

$scope.message = "Hello World";

En un momento posterior, incluso si el modelo de mensaje se actualiza, ese valor actualizado se refleja en el elemento HTML. Cuando se compile angularmente, la plantilla "Hola mundo" se adjuntará al HTML interno del mundo actual. Angular mantiene un mecanismo de observación de todas las directivas relacionadas con la vista. Tiene un mecanismo de Ciclo de resumen en el que itera a través de la matriz Watchers, actualizará el elemento DOM si hay un cambio en el valor anterior del modelo.

No hay una verificación periódica de Ámbito si hay algún cambio en los Objetos adjuntos. No todos los objetos adjuntos al alcance son observados. El alcance prototípicamente mantiene un $$ WatchersArray . El alcance solo se repite a través de WatchersArray cuando se llama $ digest.

Angular agrega un observador a WatchersArray para cada uno de estos

1. {{expresión}} - En sus plantillas (y en cualquier otro lugar donde haya una expresión) o cuando definamos ng-model.
   
2. $ scope. $ watch ('expresión / función') - En su JavaScript solo podemos adjuntar un objeto de alcance para que lo vea angular.

La función $ watch tiene tres parámetros:

1. La primera es una función de observador que simplemente devuelve el objeto o simplemente podemos agregar una expresión.
   

2. La segunda es una función de escucha que se llamará cuando haya un cambio en el objeto. Todas las cosas como los cambios de DOM se implementarán en esta función.
   

3. El tercero es un parámetro opcional que toma un booleano. Si es verdadero, el profundo angular observa el objeto y si su falso angular simplemente hace una referencia al objeto. La implementación aproximada de $ watch se ve así

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  
};

Hay algo interesante en Angular llamado Digest Cycle. El ciclo $ digest comienza como resultado de una llamada a $ scope. $ Digest (). Supongamos que cambia un modelo de $ scope en una función de controlador a través de la directiva ng-click. En ese caso, AngularJS activa automáticamente un ciclo de $ digest llamando a $ digest (). Además de ng-click, hay otras directivas / servicios incorporados que le permiten cambiar los modelos (por ejemplo, ng-model, $ timeout, etc.) y desencadenar automáticamente un ciclo $ digest. La implementación aproximada de $ digest se ve así.

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;
 };

Si usamos la función setTimeout () de JavaScript para actualizar un modelo de alcance, Angular no tiene forma de saber qué puede cambiar. En este caso, es nuestra responsabilidad llamar a $ apply () manualmente, lo que desencadena un ciclo de $ digest. De manera similar, si tiene una directiva que configura un detector de eventos DOM y cambia algunos modelos dentro de la función del controlador, debe llamar a $ apply () para asegurarse de que los cambios surtan efecto. La gran idea de $ apply es que podemos ejecutar algunos códigos que no son conscientes de Angular, que aún pueden cambiar las cosas en el alcance. Si envolvemos ese código en $ apply, se ocupará de llamar a $ digest (). Implementación aproximada de $ apply ().

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