AngularJS
Wie funktioniert die Datenbindung?

Bemerkungen

Beispiel für die Datenbindung

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

Diese "Nachricht" muss an den Gültigkeitsbereich des aktuellen Elementcontrollers angehängt werden.

$scope.message = "Hello World";

Zu einem späteren Zeitpunkt, selbst wenn das Nachrichtenmodell aktualisiert wird, wird dieser aktualisierte Wert im HTML-Element angezeigt. Beim Erstellen von Winkeln wird die Vorlage "Hello World" an die innerHTML der aktuellen Welt angehängt. Angular unterhält einen Beobachtungsmechanismus für alle Anweisungen, die der Ansicht zugeordnet sind. Es verfügt über einen Digest-Cycle-Mechanismus, bei dem es das Watchers-Array durchläuft. Es aktualisiert das DOM-Element, wenn sich der vorherige Wert des Modells ändert.

Es wird keine regelmäßige Überprüfung des Bereichs durchgeführt, ob sich an den daran angebundenen Objekten Änderungen ergeben. Nicht alle Objekte, die an den Bereich angehängt sind, werden überwacht. Scope verwaltet prototypisch ein $$ WatchersArray . Scope durchläuft diesen WatchersArray nur dann, wenn $ Digest aufgerufen wird.

Angular fügt dem WatchersArray für jedes dieser Elemente einen Watcher hinzu

1. {{expression}} - In Ihren Vorlagen (und überall dort, wo ein Ausdruck vorhanden ist) oder wenn Sie ng-model definieren.
   
2. $ scope. $ watch ('Ausdruck / Funktion') - In Ihrem JavaScript können wir nur ein Oszilloskopobjekt für die Winkelung anhängen.

Die $ watch- Funktion umfasst drei Parameter:

1. Die erste ist eine Watcher-Funktion, die das Objekt zurückgibt oder wir können nur einen Ausdruck hinzufügen.
   

2. Die zweite ist eine Listener-Funktion, die aufgerufen wird, wenn sich das Objekt ändert. Alle Dinge wie DOM-Änderungen werden in dieser Funktion implementiert.
   

3. Der dritte ist ein optionaler Parameter, der einen Booleschen Wert enthält. Wenn es wahr ist, beobachtet eckig tief das Objekt und wenn es falsch ist, führt Angular lediglich eine Referenz auf das Objekt aus. Die grobe Implementierung von $ watch sieht so aus

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

In Angular gibt es eine interessante Sache namens Digest Cycle. Der $ digest-Zyklus startet als Ergebnis eines Aufrufs an $ scope. $ Digest (). Angenommen, Sie ändern ein $ scope-Modell in einer Handlerfunktion über die Direktive ng-click. In diesem Fall löst AngularJS automatisch einen $ digest-Zyklus aus, indem es $ digest () aufruft. Zusätzlich zu ng-click gibt es mehrere integrierte Direktiven / Dienste, mit denen Sie Modelle ändern können (z. B. ng-model, $ timeout usw.). und automatisch einen $ Digest-Zyklus auslösen. Die grobe Implementierung von $ Digest sieht so aus.

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

Wenn Sie die JavaScript-Funktion setTimeout () verwenden, um ein Bereichsmodell zu aktualisieren, kann Angular nicht wissen, was Sie ändern könnten. In diesem Fall ist es unsere Verantwortung, $ apply () manuell aufzurufen, wodurch ein $ Digest-Zyklus ausgelöst wird. Wenn Sie über eine Direktive verfügen, die einen DOM-Ereignislistener einrichtet und einige Modelle innerhalb der Handlerfunktion ändert, müssen Sie $ apply () aufrufen, um sicherzustellen, dass die Änderungen wirksam werden. Die große Idee von $ apply ist, dass wir einen Code ausführen können, der Angular nicht kennt. Dieser Code kann jedoch auch Auswirkungen auf den Geltungsbereich haben. Wenn wir diesen Code in $ apply einhüllen, wird $ digest () aufgerufen. Grobe Implementierung von $ apply ().

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