Das Verständnis von Angular ' s $ anwenden () und $ digest ()

Auf der Suche nach erstklassigem Online-AngularJS-Training? Schauen Sie sich Ultimate Angular nach Todd Motto an. Verwenden Sie Code SitePoint für einen Rabatt von 25% und Support SitePoint!

AngularJS 'Funktionen von $apply() und $digest() sind grundlegend, aber manchmal verwirrende Elemente. Das Mastering ist der Schlüssel zum Verständnis von AngularJS 'innerem funktionierenden funktionsfähigen funktionsfähigen Arbeiten. Dieser Artikel verdeutlicht ihre Rollen und praktischen Anwendungen in der täglichen AngularJS -Entwicklung.

Key Takeaways:

• $apply() und $digest() sind für die Zwei-Wege-Datenbindung von AngularJS von entscheidender
• initiiert einen $apply() -Zyklus auf $digest, wodurch alle Kinderbereiche durchquert und Beobachter ausgeführt werden. AngularJS ruft es automatisch auf, wenn Modelländerungen in seinem Kontext auftreten. $rootScope
Manuelles Aufruf von
• ist erforderlich, wenn Modelländerungen außerhalb des Kontextes von AngularJS (z. B. mithörern $apply() oder DOM -Ereignis -Hörern) auftreten. Dies signalisiert AngularJs, um Beobachter zu aktualisieren und Änderungen korrekt zu verbreiten. setTimeout()
Die
• Schleife iteriert mehrmals, wobei das Umfangsmodell ändert. Es wird fortgesetzt, bis keine weiteren Änderungen erkannt werden oder eine maximale Iterationsgrenze (10) erreicht ist. $digest

Tauchgang in und $apply(): $digest() Die Zwei-Wege-Datenbindung von AngularJS ist ein leistungsstarkes Merkmal. Änderungen in der Ansicht aktualisieren automatisch das Umfangsmodell und umgekehrt. Diese Magie geschieht, weil AngularJs Beobachter auf Umfangsmodellen festlegt. Diese Beobachter, ähnlich wie benutzerdefinierte Beobachter:

Führen Sie eine Hörerfunktion aus, wenn sich

<code class="language-javascript">$scope.$watch('aModel', function(newValue, oldValue) {
  // Update the DOM with newValue
});</code>

ändert. Die entscheidende Frage lautet:

Wie aModel weiß AngularJs, wann man diese Hörerfunktionen nennt? Die Antwort ist der

Zyklus. Dieser Zyklus löst die Beobachter aus. Wenn ein Beobachter feuert, bewertet AngularJS das Umfangsmodell; Wenn eine Änderung festgestellt wird, wird die entsprechende Hörerfunktion ausgeführt.

$digest Der Zyklus

wird durch

initiiert. Wenn Sie beispielsweise ein Zielfernrohrmodell in einem $digest -Handler ändern, ruft AngularJS automatisch $scope.$digest() auf. Dies beginnt den Zyklus, fieß alle Beobachter ab und aktualisiert die Ansicht entsprechend. Andere Richtlinien/Dienste (z. B. ng-click, $digest()) Auch ng-model Zyklen auslösen. $timeout

AngularJS ruft jedoch nicht direkt $digest() auf. Stattdessen verwendet es $scope.$apply(), was wiederum $rootScope.$digest() aufruft. Dies stellt sicher, dass der Zyklus $digest am Wurzel beginnt und sich durch Kinderbereiche ausbreitet. Wenn Sie ng-click mit einer Funktion verwenden, wickelt AngularJS den Funktionsaufruf in $scope.$apply().

$apply() wird in zwei Formen geliefert: eine Annahme einer Funktion als Argument (bevorzugt) und eine No-Argument-Version, die einfach einen $digest Zyklus startet.

Handbuch $apply() Aufruf:

Wann ist manuell $apply() notwendig? AngularJS berücksichtigt nur Modelländerungen, die in in seinem Kontext (d. H. Code in $apply() eingepackt) erstellt wurden. Integrierte Richtlinien verarbeiten dies automatisch. Wenn Sie jedoch ein Modell außerhalb des Kontextes von AngularJS ändern, müssen Sie $apply() manuell aufrufen, um AngularJs über die Änderung zu informieren.

erfordert beispielsweise setTimeout(), um ein Zielfernrohrmodell zu aktualisieren, manuell $apply():

<code class="language-javascript">$scope.$watch('aModel', function(newValue, oldValue) {
  // Update the DOM with newValue
});</code>

ohne $apply() würde die Ansicht nicht aktualisiert. Bevorzugen Sie $timeout dafür, wie es automatisch $apply() behandelt. Die Funktionsargument-Version von $apply() ist am besten, da es einen try...catch -Block verwendet, um Ausnahmen über $exceptionHandler zu verarbeiten.

$digest Schleifen -Iterationen:

Die $digest -Sloop wird wiederholt ausgeführt und nach Modelländerungen überprüft. Wenn eine Hörerfunktion ein Modell modifiziert, startet der Schleifen neu, um diese Änderungen zu berücksichtigen. Dies wird fortgesetzt, bis keine mehr Änderungen gefunden wurden oder die maximale Iterationszahl (10) erreicht ist. Streben Sie Idempotent -Hörerfunktionen an, um die Schleifen -Iterationen zu minimieren.

Schlussfolgerung:

Verständnis $apply() und $digest() ist für eine effektive AngularJS -Entwicklung von entscheidender Bedeutung. Denken Sie daran, $apply() manuell aufzurufen, wenn Modelländerungen außerhalb des Kontextes von AngularJS vorgenommen werden. Verwenden Sie $timeout wann immer möglich, um manuelle $apply() Anrufe zu vermeiden.

(FAQS -Abschnitt für die Kürze entfernt.

Das obige ist der detaillierte Inhalt vonDas Verständnis von Angular ' s $ anwenden () und $ digest (). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!