AngularJS
Come funziona il collegamento dei dati

Osservazioni

Esempio di associazione dati

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

Questo 'messaggio' deve essere collegato all'ambito del controller degli elementi corrente.

$scope.message = "Hello World";

In un secondo momento, anche se il modello del messaggio viene aggiornato, il valore aggiornato si riflette nell'elemento HTML. Quando compila angolare il modello "Hello World" sarà collegato al innerHTML del mondo attuale. Angolare mantiene un meccanismo di osservazione di tutte le direttive attaccate alla vista. Ha un meccanismo del ciclo del digest in cui scorre l'array di Watchers, aggiornando l'elemento DOM se c'è un cambiamento nel valore precedente del modello.

Non è previsto un controllo periodico dell'ambito di applicazione in caso di modifica degli oggetti ad esso associati. Non tutti gli oggetti collegati all'ambito vengono guardati. L'ambito mantiene prototipicamente un WatchersArray $$ . L'ambito esegue solo iterazioni attraverso questo WatchersArray quando viene chiamato $ digest.

Angular aggiunge un osservatore a WatchersArray per ognuno di questi

1. {{espressione}} - Nei tuoi modelli (e in qualsiasi altro luogo in cui è presente un'espressione) o quando definiamo ng-model.
   
2. $ scope. $ watch ('expression / function') - Nel tuo JavaScript possiamo solo collegare un oggetto scope per il controllo angolare.

La funzione $ watch accetta tre parametri:

1. Il primo è una funzione di watcher che restituisce appena l'oggetto o possiamo semplicemente aggiungere un'espressione.
   

2. Il secondo è una funzione di ascolto che verrà chiamata quando c'è un cambiamento nell'oggetto. Tutte le cose come le modifiche DOM verranno implementate in questa funzione.
   

3. Il terzo è un parametro opzionale che accetta un valore booleano. Se il suo vero, profondo angolare guarda l'oggetto e se il suo falso Angolare fa semplicemente un riferimento guardando sull'oggetto. L'implementazione approssimativa di $ watch appare così

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

C'è una cosa interessante in Angular chiamato Digest Cycle. Il ciclo $ digest inizia come risultato di una chiamata a $ scope. $ Digest (). Si supponga di modificare un modello $ scope in una funzione di gestione tramite la direttiva ng-click. In questo caso, AngularJS attiva automaticamente un ciclo $ digest chiamando $ digest (). Oltre a ng-click, ci sono molte altre direttive / servizi incorporati che consentono di modificare i modelli (ad esempio ng-model, $ timeout, ecc.) e attiva automaticamente un ciclo $ digest. L'implementazione approssimativa di $ digest appare così.

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

Se usiamo la funzione setTimeout () di JavaScript per aggiornare un modello di scope, Angular non ha modo di sapere cosa potresti cambiare. In questo caso è nostra responsabilità chiamare $ apply () manualmente, che attiva un ciclo $ digest. Allo stesso modo, se si dispone di una direttiva che imposta un listener di eventi DOM e modifica alcuni modelli all'interno della funzione di gestione, è necessario chiamare $ apply () per garantire che le modifiche abbiano effetto. La grande idea di $ apply è che possiamo eseguire un codice che non è a conoscenza di Angular, che il codice potrebbe ancora cambiare le cose sull'ambito. Se avvolgiamo quel codice in $ apply, si prenderà cura di chiamare $ digest (). Implementazione approssimativa di $ apply ().

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