Verwenden Sie angle.copy, um die bidirektionale Bindung und Analyse von Variablen abzubrechen-PHP开发-php.cn

Verwenden Sie angle.copy, um die bidirektionale Bindung und Analyse von Variablen abzubrechen

高洛峰

Freigeben： 2016-12-05 11:40:03

Original

1523 Leute haben es durchsucht

Werfen wir zunächst einen Blick auf den Beispielcode

<body ng-app="app">
 <div ng-controller="CopyController">
 <div>
 data: <input ng-model="user.data" /><br>
 user.data: {{user.data}} <br>
 user1.data: {{user1.data}} <br>
 <button ng-click="changeData1()">change</button> <br>
 <button ng-click="copy()">copy</button> <br>
 copyData: {{copyUser.data}}
 </div>
 </div>
 <script src="node_modules/angular/angular.min.js"></script>
</body>
<script>
 angular.module(&#39;app&#39;, [])
 .controller(&#39;CopyController&#39;, function ($scope) {
 // body...
 $scope.changeData1 = function () {
  // body...
  scope.user1=scope.user1=
scope.user;
  $scope.user1.data = &#39;is changed&#39;;
 }
 $scope.copy = function () {
  // body...
  scope.copyUser=angular.copy(scope.copyUser=angular.copy(
scope.user);
 }
 });
</script>

Nach dem Login kopieren

Wie Sie in der obigen Demonstration sehen können, wird der Wert von copyData zu „this“, wenn auf die Schaltfläche „Kopieren“ geklickt wird sind alte Daten“, hat den Wert von „user“ erfolgreich nach „copyUser“ kopiert.

Wenn auf die Schaltfläche „Ändern“ geklickt wird, werden die Werte von „user1“ und „user“ zu „wird geändert“, der Wert von „copyUser“ jedoch nicht geändert. Wenn zu diesem Zeitpunkt der Wert im Eingabefeld geändert wird, ändern sich die Werte von Benutzer und Benutzer1 entsprechend, was darauf hinweist, dass es sich bei den beiden tatsächlich um dieselbe Variablenreferenz handelt. Und copyUser hat sich nicht geändert.

Das Prinzip von angle.copy, die bidirektionale Bindung aufheben zu können

Dies hängt mit der Tatsache zusammen, dass Objekte in JavaScript Referenztypen sind.

Werttypen in JavaScript

In JavaScript werden Werte in zwei Typen unterteilt: Grundwerte und Referenzwerte.

Primitive Werte: einfache Datenfelder, die im Stapel (Stack) gespeichert sind, dh ihre Werte werden direkt an der Stelle gespeichert, an der auf Variablen zugegriffen wird.

Referenzwerte: im gespeichert Heap (Heap), das heißt, der in der Variablen gespeicherte Wert ist ein Zeiger, der auf den Speicher zeigt, in dem das Objekt gespeichert ist.

Objekte in JavaScript sind Referenzwerte, was bedeutet, dass Objekte Werte als Referenz übergeben.

Also im obigen Code:

Die Werte der Objekte $scope.user und $scope.user1 verweisen beide auf dieselbe Referenz. Bei Angular bedeutet die Überwachung von Variablenänderungen die Überwachung der von ihrem Objekt referenzierten Adresse. Wenn sich also der Referenzwert des Objekts ändert, ändern sich alle darauf verweisenden Objekte entsprechend.

In Angular kann die bidirektionale Bindung also nicht direkt durch Objektzuweisung freigegeben werden. Die Möglichkeit, die bidirektionale Bindung aufzuheben, besteht also darin, ein neues Objekt zu erstellen und dann dem neuen Objekt den Wert des ursprünglichen Objekts zuzuweisen. Ist das nicht nur eine tiefe Kopie in JavaScript?

Ja, angle.copy ist die von Angular bereitgestellte Deep-Copy-Methode. Daher kann das über angle.copy kopierte Objekt mit dem ursprünglichen Objektwert übereinstimmen und nicht auf dieselbe Referenz wie das alte Objekt verweisen, wodurch die bidirektionale Bindung der Objektvariablen realisiert wird.