Lösung für AngularJS-Datenbindungsfehler

Verwandte Empfehlungen: „AngularJS-Tutorial“

Ich glaube, dass jeder auch auf das Problem stoßen wird, auf das ich jetzt bei der Entwicklung von AngularJS gestoßen bin: Es ist offensichtlich, dass die Seite eine bidirektionale Datenbindung hat und die Daten sich geändert haben. aber die Ansicht wird nicht aktualisiert.

Codebeispiel

<div ng-controller="testCtrl">
  <p>{{name}}</p>
  <div ng-if="show">
    <input type="text" ng-model="name">
  </div>
</div>
<script>
	function testCtrl($scope){
	    $scope.show = true;
	    $scope.name = 'xiao ming';
	}
</script>

Wie im Code gezeigt, sollte sich der Wert des Variablennamens aufgrund der bidirektionalen Bindung der Daten ändern, wenn wir den Wert der Eingabe ändern, und mit dem Wert von übereinstimmen die Eingabe. Allerdings kommt es tatsächlich zu keiner Änderung der Sichtweise.
Der Grund dafür ist, dass ng-if den Bereich isoliert und einen neuen Bereich erstellt. Daher ist „scope.name“ kein Wert im selben Bereich wie der Name in der Eingabe und kann daher nicht geändert werden.

Scope

Jede Angular-Anwendung verfügt standardmäßig über einen Root-Bereich $rootScope. Der Root-Bereich befindet sich auf der obersten Ebene und alle Ebenen des Bereichs hängen davon ab.

Normalerweise werden die auf der Seite an ng-model gebundenen Variablen im entsprechenden Controller definiert. Wenn eine Variable im aktuellen Bereich nicht definiert ist, sucht JavaScript über den Prototyp des aktuellen Controllers nach, bei dem es sich um eine Bereichsvererbung handelt.

Lösung

<div ng-controller=“testCtrl">
  <p>{{data.name}}</p>
  <div ng-if="show">
    <input type="text" ng-model="data.name">
  </div>
</div>
<script>
	function testCtrl($scope){
	 	$scope.show = true;
	    $scope.data = {};
	    $scope.data.name = 'xiao ming';
	}
</script>

ng-if ist derzeit der übergeordnete Bereich und ng-if entspricht dem untergeordneten Bereich Datenbindung.

ng-if Scope

In diesem Fall sind die Daten der beiden dieselbe Referenz, und die Änderung der Attribute dieses Objekts kann auf die zweistufigen Objekte übertragen werden.
Die tatsächliche Situation ist, dass nicht nur der Controller einen Bereich erstellen kann, sondern auch Anweisungen wie ng-if (implizit) neue Bereiche erstellen. Zusammenfassend lässt sich sagen, dass ng-if, ng-switch, ng-include und andere Dinge, die eine Schnittstelle dynamisch erstellen können, alle ihren eigenen Bereich der ersten Ebene haben. Daher sollten während des Entwicklungsprozesses so weit wie möglich Objektreferenzen verwendet werden.

Weitere Kenntnisse über Computerprogrammierung finden Sie unter: Einführung in die Programmierung! !

Das obige ist der detaillierte Inhalt vonLösung für AngularJS-Datenbindungsfehler. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!