So verwenden Sie die bidirektionale Bindung in AngularJs

In diesem Artikel wird hauptsächlich das bidirektionale Bindungsprinzip (Datenbindungsmechanismus) von AngularJs vorgestellt. Der Herausgeber findet es recht gut, daher werde ich es jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber, um einen Blick darauf zu werfen.

Was ist also eine bidirektionale Bindung?

Zuerst müssen wir die Datenbindung verstehen. Die Seiten der Website, die wir sehen, bestehen aus zwei Teilen: Daten und Design. Das Konvertieren des Designs in eine Sprache, die der Browser verstehen kann, ist die Hauptaufgabe von HTML und CSS. Die Hauptaufgabe von js besteht darin, Daten auf der Seite anzuzeigen und bestimmte interaktive Effekte zu erzielen (z. B. Klicks und andere Benutzervorgänge sowie entsprechende Seitenreaktionen). Oftmals können wir die Seite nicht jedes Mal aktualisieren, wenn wir Daten aktualisieren. Stattdessen fordern wir relevante Daten vom Backend an und aktualisieren die Seite (Post-Anfrage), indem wir sie laden, ohne sie zu aktualisieren. Nachdem die Daten dann aktualisiert wurden, kann die entsprechende Stelle auf der Seite automatisch entsprechende Änderungen vornehmen, was einer Datenbindung entspricht.

Im vorherigen Entwicklungsmodell verwendet dieser Schritt normalerweise jq, um die DOM-Struktur zu bedienen und die Seite zu aktualisieren. Aber das bringt viel Code und viele Operationen mit sich. Wenn wir anhand der zu Beginn vom Backend erhaltenen Daten ermitteln können, welche Vorgänge auf der Seite ausgeführt werden müssen, ändert sich bei Datenänderungen automatisch auch der relevante Inhalt der Seite, was die Entwicklung von Front- Endingenieure. Im neuen Framework (Angualr, React, Vue usw.) wird die Seite durch Überwachung der Daten entsprechend den geschriebenen Regeln geändert, wenn Änderungen festgestellt werden, wodurch die Datenbindung realisiert wird. Es ist ersichtlich, dass die Datenbindung eine Änderung von M (Modell, Daten) zu V (Ansicht) durch VM (Modellansicht, die Transformationsregel zwischen Daten und Seiten) ist.

Die Zwei-Wege-Bindung fügt einen umgekehrten Pfad hinzu. Wenn der Benutzer die Seite bedient (z. B. einen Wert in Eingabe eingeben), können sich die Daten im Laufe der Zeit ändern, und entsprechend den Datenänderungen werden entsprechende Änderungen in einem anderen Teil der Seite vorgenommen. Ein häufiges Beispiel ist der Warenkorb in Taobao. Wenn sich die Warenmenge ändert, kann sich mit der Zeit auch der Preis der Waren ändern. Dadurch wird eine bidirektionale Bindung von V-M-VM-V erreicht.

AngularJs richtet eine Überwachungswarteschlange für das Bereichsmodell ein, um auf Datenänderungen zu warten und die Ansicht zu aktualisieren. Jedes Mal, wenn Sie etwas an view (HTML) binden, fügt AngularJs ein $watch in die $watch-Warteschlange ein, um zu erkennen, ob es Änderungen im überwachten Modell gibt. Die $digest-Schleife wird ausgelöst, wenn der Browser ein Ereignis empfängt, das vom Angular-Kontext verarbeitet werden kann. $digest durchläuft alle $watches. Dadurch wird das DOM aktualisiert.

$watch

Dies ähnelt in gewisser Weise unserem Beobachtermuster. Im aktuellen Bereich $scope erstellen wir einen Monitor $watchers und einen Listener$ watch, $watchers sind für die Verwaltung aller $watches verantwortlich. Jedes Mal, wenn wir sie an die Benutzeroberfläche binden, erstellen wir automatisch eine $watch und fügen sie in $watchers ein.

controller.js

app.controller('MainCtrl', function($scope) {
 $scope.Hello = "Hello";
 $scope.world = "World";
});

index.html

<p>{{Hello}}</p>

Auch wenn wir zwei Variablen zu $scope hinzufügen, gibt es c858d69dd81008e347cd5f5447f8e393 Es ist an die Benutzeroberfläche gebunden, daher wird hier nur ein $watche6e38b3c62e8df885fe2e3986461aa63

$digest

generiert und kann beim Empfang durch den Angular-Kontext verarbeitet werden Beim Browser-Ereignis wird die $digest-Schleife ausgelöst. $digest durchläuft unsere $watches, wenn keine Änderung in $watch erfolgt. Wenn mindestens einer aktualisiert wurde, wird die Schleife erneut ausgelöst, bis alle $watches keine Änderungen aufweisen. Dadurch wird sichergestellt, dass sich jedes Modell nicht erneut ändert. Das ist der Dirty-Checking-Mechanismus

controller.js

app.controller('MainCtrl', function() {
 $scope.name = "Foo";

 $scope.changeFoo = function() {
  $scope.name = "Bar";
 }
});

index.js

<p>{{ name }}</p>
<button ng-click="changeFoo()">Change the name</button>

1. Wenn wir den Knopf drücken

2. Der Browser empfängt ein Ereignis und tritt in den Winkelkontext ein.

3. Die $digest-Schleife beginnt mit der Ausführung und fragt ab, ob sich jede $watch ändert.

4. Da die $watch-Überwachung von $scope.name eine Änderung meldet, wird ein weiterer $digest-Zyklus erzwungen.

5. Neue $digest-Schleife ohne erkannte Änderungen.

6. Aktualisiert den Teil des DOM, der dem neuen Wert von $scope.name entspricht.

$apply

$apply Wir können es direkt als Aktualisierung der Benutzeroberfläche verstehen. c858d69dd81008e347cd5f5447f8e393Wenn Sie $apply aufrufen, wenn das Ereignis ausgelöst wird, wird es in den Winkelkontext eingegeben. Wenn es nicht aufgerufen wird, wird es nicht eingegeben und der nachfolgende $digest-Erkennungsmechanismus wird nicht ausgelöste6e38b3c62e8df885fe2e3986461aa63

app.directive('clickable', function() {
 return {
  restrict: "E",
  scope: {
  foo: '='
  },
  template: &#39;<ul style="background-color: lightblue"><li>{{foo}}</li></ul>&#39;,
  link: function(scope, element, attrs) {
  element.bind(&#39;click&#39;, function() {
   scope.foo++;
   console.log(scope.foo);
  });
  }
 }
});

Wenn wir die anklickbare Anweisung aufrufen, können wir sehen, dass der Wert von foo gestiegen ist, sich der auf der Benutzeroberfläche angezeigte Inhalt jedoch nicht geändert hat. Der $digest-Dirty-Erkennungsmechanismus wird nicht ausgelöst und die $watch zur Erkennung von foo wird nicht ausgeführt.

Zwei Formen der $apply()-Methode

1) Keine Parameter

$scope.$apply();

element.bind('click', function() {
 scope.foo++;
 //if error
 scope.$apply();
});

Wenn wir diese Form verwenden und das Programm vor der Ausnahme „scope.$apply“ auftritt, dann gilt der Bereich .$apply wird nicht ausgeführt und die Schnittstelle wird nicht aktualisiert

2) Wenn ein Parameter vorhanden ist

$scope.$apply(function(){
 ...
})

rrree

Wenn Sie dieses Formular verwenden, werden die Daten auch dann weiterhin angezeigt, wenn später eine Ausnahme auftritt aktualisiert werden.

Verwenden von $watch in AngularJS

Allgemeine Verwendung:

$scope.name = 'Hello';
$scope.$watch('name', function(newValue, oldValue) {
 if (newValue === oldValue) { return; } 
 $scope.updated++;
});

传入到$watch()中的第二个参数是一个回调函数，该函数在name的值发生变化的时候会被调用。

如果要监听的是一个对象，那还需要第三个参数：

$scope.data.name = 'Hello';
$scope.$watch('data', function(newValue, oldValue) {
 if (newValue === oldValue) { return; } 
 $scope.updated++;
}, true);

表示比较的是对象的值而不是引用，如果不加第三个参数true，在 data.name 变化时，不会触发相应操作，因为引用的是同一引用。

总结

1) 只有在$scope变量绑定到页面上，才会创建 $watch

2) $apply决定事件是否可以进入angular context

3) $digest 循环检查model时最少两次，最多10次(多于10次抛出异常，防止无限检查)

4) AngularJs自带的指令已经实现了$apply，所以不需要我们额外的编写

5) 在自定义指令时，建议使用带function参数的$apply

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在javaScript中如何使用手机号码校验工具类PhoneUtils

在微信小程序中如何实现下载进度条

在微信小程序中如何使用video组件播放视频

在微信小程序中如何使用audio组件

在微信小程序中有关功能函数总结（详细教程）

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die bidirektionale Bindung in AngularJs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!