Eine kurze Diskussion über die Methode zur Implementierung der bidirektionalen Bindung in angle.js $watch $digest $apply_AngularJS

Funktionen in Angular.js, bidirektionale Bindung.

Was für eine magische Funktion, die es ermöglicht, Änderungen in der Ansicht direkt in den Daten widerzuspiegeln. Wie geht das?

Dies ist den folgenden 3 wichtigen Scope-Methoden zu verdanken:

$watch
$digest
$apply

Was sind ihre Unterschiede? Stellen wir sie vor:

$watch
Dies ist ein Listener, der Daten im Bereich abhört

Methodenbeschreibung:

$scope.$watch('参数',function(newValue,oldValue){
 //逻辑处理
})

Wir haben oben einen Listener erstellt.
„Parameter“ ist ein Objekt (oder ein Attribut eines Objekts) unter dem $scope-Objekt. Beachten Sie, dass es sich um eine Zeichenfolge handelt

Angenommen, Sie möchten die Eigenschaft $scope.name überwachen.

$scope.$watch('name',function(newValue,oldValue){
 //逻辑处理
})

Wie im obigen Code benötigt „Name“ Anführungszeichen

Dem Parameter folgt eine Rückruffunktion. Der Parameter der Rückruffunktion gibt das überwachte Attribut, den neuen Wert nach der Änderung und den alten Wert vor der vorherigen Änderung zurück.

$digest

Er ist dafür verantwortlich, zu überprüfen, ob sich die Daten im Bereich geändert haben. Wenn sich ein bestimmtes Attribut ändert, benachrichtigt er den Listener sofort über dieses Attribut (den von $watch registrierten Listener), löst den Listener aus und führt die Rückruffunktion aus .

$apply

Diese Methode ist $digest sehr ähnlich, $digest prüft alle Daten im Bereich

$apply entspricht der Überprüfung aller Daten in rootScope, es überprüft alle Daten vom übergeordneten zum untergeordneten Element

$apply() == $rootScope.$digest()

Die Methode $apply() hat zwei Formen.

Der erste akzeptiert eine Funktion als Parameter.

Dies löst die Funktion $digest aus und führt die Funktion
im Parameter einmal aus

Der zweite Typ akzeptiert keine Parameter.

Dies löst lediglich einen $digest-Eltern-zu-Kind-Zyklus aus

In Angular.js wird $digest nicht direkt aufgerufen, sondern $scope.$apply() wird stattdessen verwendet

Ich habe den Monitor nicht eingestellt, warum können die Ansicht und die Daten in zwei Richtungen gebunden werden

Zum Beispiel ein Textfeld ng-model="name"

Zu diesem Zeitpunkt gibt es tatsächlich einen Attributnamen unter dem $scope-Objekt, der der bidirektionalen Bindung mit der obigen Ansicht
entspricht

Wie erreicht man das?

In der Tat, wenn wir ng-model="name" oder ng-bind="name" oder {{name} definieren Zu diesem Zeitpunkt legt angle.js automatisch einen Listener für das „name“-Attribut im $scope-Modell fest:

$scope.$watch('name', function(newValue, oldValue) {
  //监听 name 属性的变化
});

Es stellt sich heraus, dass angle.js uns dabei hilft, automatisch einen Listener zu erstellen, sodass diese Eigenschaft und die Daten von $scope.name in Echtzeit in beide Richtungen gebunden werden.

Natürlich werden Sie manchmal feststellen, dass sich die Daten geändert haben, aber die Benutzeroberfläche wird nicht aktualisiert.

Nein

Es ist nur so, dass Ihre Daten noch nicht zurückgegeben wurden, wenn das $scope-Modell die Digest-Schleife durchläuft,

Beim asynchronen Aufruf einer Methode werden beispielsweise die von Callbac zurückgegebenen Daten

Sie legen beispielsweise eine geplante Triggerfunktion in setTimeout fest und ändern dann die Modelldaten

Kurz gesagt, der Digest-Zyklus des $scope-Modells wurde verpasst, was dazu führte, dass das Modell die Benutzeroberfläche nicht dazu aufforderte, entsprechend neuen Daten zu aktualisieren.

Was soll ich tun, wenn ich auf ein solches Problem stoße?

Wir müssen Digest manuell aufrufen, um die Daten in einer Schleife zu überprüfen und eine bidirektionale Bindung zu erreichen

Wie wir oben gesagt haben, rufen Sie die Digest-Methode normalerweise nicht direkt auf, sondern rufen Sie die $apply-Methode manuell auf, um die $digest-Schleife indirekt auszulösen.

Wie folgt:

setTimeout(function() {
 $scope.name= '一介布衣';
 $scope.$apply();
}, 2000);

Das Problem liegt hier, es ist Zeit, die Apply-Methode manuell aufzurufen

Bisher hat angle.js die Methode $apply() für einige Anweisungen und Dienste automatisch implementiert.

Zum Beispiel ng-click, ng-model, $timeout service, $http service usw.

Nach dem Aufruf ruft angle.js automatisch $apply() auf, damit wir eine bidirektionale Datenbindung erreichen können.