So verwenden Sie AngularJS-Bereiche

Dieses Mal zeige ich Ihnen, wie Sie den AngularJS-Bereich verwenden und welche Vorsichtsmaßnahmen für die Verwendung des AngularJS-Bereichs gelten. Das Folgende ist ein praktischer Fall, werfen wir einen Blick darauf.

Problemeinführung

Nachdem Sie Angular eine Zeit lang verwendet haben, werden Sie im Grunde auf eine Grube wie diese stoßen:

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

Binden Sie das p-Element und das input-Element an dieselbe Variable. Sie hätten gedacht, dass sich bei der Eingabe von Inhalten in das Eingabefeld auch der in p angezeigte Inhalt entsprechend ändert.

Dies ist jedoch nicht der Fall, egal wie sich die Elemente in input ändern. p

Wenn wir über den Grund dafür sprechen wollen, müssen wir mit dem Umfang von Angular beginnen.

Bereich

Jede Angular-Anwendung verfügt standardmäßig über einen Root-Bereich $rootScope. Der Root-Bereich befindet sich auf der obersten Ebene und geht von dieser nach unten . Hängende Zielfernrohre auf allen Ebenen.

Normalerweise werden die durch

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

Dies ist in zwei Situationen unterteilt.

1. Grundlegende Typvariablen

<p ng-controller="OuterCtrl">
 <p>{{x}}</p>
 <p ng-controller="InnerCtrl">
  <input type="text" ng-model="x">
 </p>
</p>
<script>
function OuterCtrl($scope){
  $scope.x = 'hello';
}
function InnerCtrl($scope){
}
</script>

Nach dem Ausführen werden Sie das gleiche Problem wie am Anfang des Artikels feststellen, aber das draußen hat sich nicht verändert.

Der Grund dafür ist, dass die Variable

nicht in InnerCtrl definiert ist. Beim Abrufen des Werts wird entlang der Prototypenkette nach dem in x definierten OuterCtrl gesucht und dann Weisen Sie es zu Wenn Sie einen Wert in das Eingabefeld von x eingeben, ändert sich das InnerCtrl in InnerCtrl, hat aber keine Auswirkung auf das x in OuterCtrl. Zu diesem Zeitpunkt sind die beiden x unabhängig. x

Wenn Ihnen die Mühe jedoch nichts ausmacht, können Sie

verwenden, um Basisvariablen im oberen Bereich zu binden und zu beeinflussen: $scope.$parent

<input type="text" ng-model="$parent.x">

2 🎜>Was passiert also, wenn die Bereiche der oberen und unteren Ebene Variablen gemeinsam nutzen möchten?

Die Antwort ist die Verwendung von Referenztypvariablen.

<p ng-controller="OuterCtrl">
 <p>{{x}}</p>
 <p ng-controller="InnerCtrl">
  <input type="text" ng-model="x">
 </p>
</p>
<script>
function OuterCtrl($scope){
  $scope.data = {};
  $scope.data.x = 'hello';
}
function InnerCtrl($scope){
}
</script>

In diesem Fall sind beide

die gleiche Referenz. Änderungen an den Eigenschaften dieses Objekts können auf die zweistufigen Objekte übertragen werden.

data

Bereich in ng-ifWorüber wir zuvor gesprochen haben, ist der Bereich zwischen zwei Ebenen von

Controllern

, was Hängt das mit dem oben genannten Problem zusammen? Sieht es nicht so aus, als gäbe es nur einen Controller? Tatsächlich kann nicht nur der Controller einen Bereich erstellen, auch Anweisungen wie

generieren (implizit) neue Bereiche.

ng-ifUm es zusammenzufassen:

,

, ng-<a href="http://www.php.cn/wiki/137.html" target="_blank"> Einschließen <code>ng-if und andere Dinge, die dynamisch eine Schnittstelle erstellen, haben alle ihren eigenen Bereich der ersten Ebene. ng-switchng-<a href="http://www.php.cn/wiki/137.html" target="_blank">include</a> Um variable Mehrdeutigkeiten in der Vorlage zu vermeiden, sollten Sie daher im Entwicklungsprozess so oft wie möglich Benennungsqualifikationen verwenden, z. B.

. Die Möglichkeit einer Mehrdeutigkeit ist viel geringer als bei einem separaten

. data.xxIch glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So verwenden Sie Koa2, um WeChat QR-Code-Scan-Zahlungen zu entwickeln

So verwenden Sie AngularJS zur Implementierung Tab-Seiten-Tab-Umschaltung

Das obige ist der detaillierte Inhalt vonSo verwenden Sie AngularJS-Bereiche. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!