AngularJS
Hur datainbindning fungerar

Anmärkningar

Exempel på bindning av data

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

Detta "meddelande" måste bifogas till den aktuella elementkontrollerns räckvidd.

$scope.message = "Hello World";

Vid en senare tidpunkt, även om meddelandemodellen uppdateras, återspeglas det uppdaterade värdet i HTML-elementet. När vinkel kompileras kommer mallen "Hello World" att fästas till innerhTML i den aktuella världen. Angular upprätthåller en övervakningsmekanism för alla direktiv som är kopplade till vyn. Den har en Digest Cycle-mekanism där den iterates genom Watchers-matrisen, den kommer att uppdatera DOM-elementet om det sker en förändring i modellens tidigare värde.

Det sker ingen periodisk kontroll av omfånget om det finns någon förändring av de objekt som är kopplade till det. Det är inte alla objekt som är kopplade till omfattningen. Scope prototypiskt upprätthåller en $$ WatchersArray . Omfattning upprepas endast genom denna WatchersArray när $ digest kallas.

Angular lägger till en bevakare till WatchersArray för var och en av dessa

1. {{expression}} - I dina mallar (och någon annanstans där det finns ett uttryck) eller när vi definierar ng-modell.
   
2. $ scope. $ watch ('expression / function') - I din JavaScript kan vi bara bifoga ett scope-objekt för vinkelrätt att titta på.

$ watch- funktion tar in tre parametrar:

1. Den första är en vaktfunktion som bara returnerar objektet eller så kan vi bara lägga till ett uttryck.
   

2. Den andra är en lyssnarfunktion som kommer att kallas när objektet förändras. Alla saker som DOM-förändringar kommer att implementeras i den här funktionen.
   

3. Den tredje är en valfri parameter som tar in en booleska. Om dess sanna, vinklade djupa tittar på objektet & om dess falska vinkel bara gör en referens som tittar på objektet. Grov implementering av $ klocka ser så här ut

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

Det finns en intressant sak i Angular som kallas Digest Cycle. $ Digestcykeln startar som ett resultat av ett samtal till $ scope. $ Digest (). Antag att du ändrar en $ scope-modell i en hanteringsfunktion genom ng-klick-direktivet. I så fall utlöser AngularJS automatiskt en $ digest-cykel genom att ringa $ digest (). Förutom ng-klick finns det flera andra inbyggda direktiv / tjänster som låter dig byta modeller (t.ex. ng-modell, $ timeout, etc.) och utlöser automatiskt en $ digest-cykel. Det grova genomförandet av $ digest ser så här ut.

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

Om vi använder JavaScript's setTimeout () -funktion för att uppdatera en omfattningsmodell, har Angular inget sätt att veta vad du kan ändra. I detta fall är det vårt ansvar att ringa $ applicera () manuellt, vilket utlöser en $ digest-cykel. På samma sätt, om du har ett direktiv som sätter upp en DOM-händelse lyssnare och ändrar vissa modeller i hanterarfunktionen, måste du ringa $ applicera () för att säkerställa att ändringarna träder i kraft. Den stora idén med $ applicera är att vi kan köra en kod som inte är medveten om Angular, den koden kan fortfarande ändra saker på räckvidden. Om vi lägger in den koden i $ gäller, kommer den att ta hand om att ringa $ digest (). Grov implementering av $ tillämpas ().

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