Unterschiede zwischen $watch(), $digest() und $apply() in AngularJS

Unterschiede zwischen $watch(), $digest() und $apply() in AngularJS_AngularJS

WBOY

Freigeben： 2016-05-16 15:06:36

Original

1347 Leute haben es durchsucht

$watch(), $digest() und $apply() in AngularJS $scope sind die Kernfunktionen von AngularJS. Sie müssen diese Funktionen verstehen, um AngularJS zu lernen.

Beim Binden von Variablen in $scope zur Anzeige erstellt AngularJS intern automatisch eine „Überwachung“. „Watch“ wird verwendet, um Änderungen an Variablen im AngularJS-Bereich zu überwachen. Eine „Watch“ kann durch Aufruf der Methode $scope.$watch() erstellt werden.

Die Funktion $scope.$digest() durchläuft alle Überwachungen und erkennt, ob sich die Variablen im $scope, auf die sie lauscht, geändert haben. Wenn sich die Variable ändert, wird die der Variablen entsprechende Abhörfunktion aufgerufen. Die Listening-Funktion kann viele Vorgänge ausführen, z. B. dafür sorgen, dass der Text in HTML den neuesten Variablenwert anzeigt. Es ist ersichtlich, dass $scope.$digest Datenbindungsaktualisierungen auslösen kann.

In den meisten Fällen ruft AngualrJS die Funktionen $scope.$watch() und $scope.$digest() automatisch auf, aber in einigen Fällen müssen wir sie manuell aufrufen, daher ist es wichtig zu verstehen, wie sie funktionieren Arbeiten.

$scope.$apply() Diese Funktion führt zuerst Code aus und ruft dann $scope.$digest() auf. Alle Uhren werden einmal getestet und die entsprechenden Abhörfunktionen ausgeführt. $scope.$apply() ist nützlich, wenn AngularJS in anderen JavaScript-Code integriert wird.

Als nächstes erklären wir $watch(), $digest() und $apply() im Detail.

$watch()
$watch(watchExpression, listener, [objectEquality])

watchExpression: Überwachungsobjekt, das eine Zeichenfolge oder eine Funktion (Bereich) sein kann{}

Listener: Rückruffunktion function(newVal, oldVal, Scope){}

wird ausgeführt, wenn sich das Listening-Objekt ändert

objectEquality: Ob eine umfassende Überwachung erfolgen soll. Wenn auf „true“ gesetzt, weist es Angular an, jede Eigenschaftsänderung im überwachten Objekt zu überprüfen. Sie sollten dies verwenden, wenn Sie statt eines einfachen Werts einzelne Elemente eines Arrays oder eine Eigenschaft eines Objekts überwachen möchten. (Standard: false)

$digest()
Erkennt alle Uhren im aktuellen Bereich und in den Unterbereichen, da die Überwachungsfunktion das Modell (Variablen im Bereich) während der Ausführung ändert und $digest() weiterhin aufgerufen wird, bis sich das Modell nicht mehr ändert. Bei mehr als zehnmaligem Aufruf löst $digest() die Ausnahme „Maximale Iterationsgrenze überschritten“ aus, um zu verhindern, dass das Programm in eine Endlosschleife eintritt.

$apply()
$apply([exp])

exp: Zeichenfolge oder Funktion (Bereich){}

Das $apply()-Lebenszyklus-Pseudocodediagramm sieht wie folgt aus

function $apply(expr) {
 try {
  return $eval(expr);
 } catch (e) {
  $exceptionHandler(e);
 } finally {
  $root.$digest();
 }
}

Nach dem Login kopieren

Beispiel
Nachfolgend veranschaulichen wir $watch, $digest und $apply anhand eines Beispiels.

<script>
var module = angular.module("myapp", []);
var myController1 = module.controller("myController", function($scope) {
  $scope.data = { time : new Date() };
  $scope.updateTime = function() {
    $scope.data.time = new Date();
  }
   
  document.getElementById("updateTimeButton")
      .addEventListener('click', function() {
    console.log("update time clicked");
    $scope.data.time = new Date();
  });
});
</script>
<body ng-app="myapp">
<div ng-controller="myController">
  {{data.time}}
 
  <br/>
  <button ng-click="updateTime()">update time - ng-click</button>
  <button id="updateTimeButton" >update time</button>
</div>
</body>

Nach dem Login kopieren

Dieser Code bindet $scope.data.time zur Anzeige an HTML. Gleichzeitig erstellt diese Bindung automatisch eine Überwachung, um Änderungen in $scope.date.time zu überwachen. Darüber hinaus gibt es hier zwei Schaltflächen. Die erste Schaltfläche ruft die Methode $scope.updateTime über die ng-click-Anweisung auf. Anschließend führt AngularJS automatisch $scope.$digest() aus, um die neueste Zeit in HTML anzuzeigen. Die zweite Schaltfläche fügt über Javascript-Code ein Klickereignis hinzu, um die Zeit im HTML zu aktualisieren. Die zweite Schaltfläche funktioniert jedoch nicht. Die Lösung besteht darin, die Methode $scope.$digest() am Ende des Klickereignisses manuell aufzurufen:

document.getElementById("updateTimeButton")
    .addEventListener('click', function() {
  console.log("update time clicked");
  $scope.data.time = new Date();
  $scope.$digest();
});

Nach dem Login kopieren

Eine andere Lösung besteht darin, $scope.$apply() wie folgt aufzurufen:

document.getElementById("updateTimeButton")
    .addEventListener('click', function() {
  $scope.$apply(function(){
      console.log("update time clicked");
      $scope.data.time = new Date();
    }
  );
});

Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.