So verwenden Sie den Bereich im Angular-Bereich

In diesem Artikel wird hauptsächlich die spezifische Verwendung des Angular-Bereichs vorgestellt. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Editor und werfen wir einen Blick darauf

Scope ist die Verbindung zwischen HTML (Ansicht) und JavaScript (Controller).

Scope ist ein Objekt mit verfügbaren Methoden und Eigenschaften.

Der Bereich kann auf Ansichten und Controller angewendet werden.

$rootScope

Jede AngularJs-Anwendung verfügt standardmäßig über einen Root-Bereich – $rootScope. Der Root-Bereich befindet sich oben und dient als übergeordneter Bereich für andere Bereiche. , kann auf die gesamte Anwendung angewendet werden.

$scope

scope (scope) entspricht dem Modell des MVC-Modus. Es ist die Verbindung zwischen HTML (Ansicht) und JavaScript (Controller). Gilt für Ansichten und Controller.

Bereich ist der Kontext, in dem der Ausdruck ausgeführt wird. Gleichzeitig ist der Bereich auch ein Objekt mit verfügbaren Methoden und Eigenschaften.

1. Werterfassung und Zuweisung von Variablen

<p ng-controller="parentCtrl">
 <span>{{number}}</span>
 <p ng-controller="childCtrl">
  <span>{{number}}</span>
  <button ng-click="number = number +1">增加</button>
 </p>
</p>

function parentCtrl($scope){
 $scope.number = 1;
}
function childCtrl($scope){ 
}

Wirkung:

Es werden zwei Einsen auf der Oberfläche angezeigt, aber Wenn wir auf die Schaltfläche klicken, ändern sich die Daten im ChildCtrl-Bereich, aber die Daten im ParentCtrl-Bereich ändern sich nicht

Analyse:

①Der ChildCtrl-Bereich erbt den ParentCtrl Bereich (Ähnlich der Prototyp-Kettenvererbung von JavaScript), sodass der Bereich „childCtrl“ auf den Inhalt von „parentCtrl“ zugreifen kann.
②Nachdem Sie auf die Schaltfläche geklickt haben, wird eine Variable vom Basistyp „Zahl“ im Gültigkeitsbereich „childCtrl“ erstellt. Wenn „childCtrl“ bereits über eine Variable vom Basistyp verfügt, wird nicht auf die Prototypenkette zugegriffen.

Lösung:

① Sie können $parent verwenden, um Änderungen im übergeordneten Bereich anzugeben

 <p ng-controller="parentCtrl">
  <span>{{number}}</span>
  <p ng-controller="childCtrl">
   <span>{{number}}</span>
   <button ng-click="$parent.number = number +1">增加</button>
  </p>
 </p>

② Verwenden Sie sowohl innere als auch äußere Referenztypvariablen Bereiche Die Referenz des Datenobjekts, die die Eigenschaften des Objekts ändert, verweist immer noch auf dieselbe Variable.

 <p ng-controller="parentCtrl">
  <span>{{data.number}}</span>
  <p ng-controller="childCtrl">
   <span>{{data.number}}</span>
   <button ng-click="data.number = data.number +1">增加</button>
  </p>
 </p>
 
 function parentCtrl($scope){
  $scope.data.number = 123&#39;;
 }
 function childCtrl($scope){
  
 }

ng-if, ng-repeat, ng-switch, ng-include und andere Anweisungen generieren ebenfalls neue Bereiche

2. Geltungsbereich in der Richtlinie

.directive("myDirective", function () {
return {
 restrict: "AE",
 scope: {
  name: '@myName',
  age: '=',
  changeAge: '&changeMyAge'
 },
 replace: true,
 template: "<p class=&#39;my-directive&#39;>" +
  "我的名字是：<span ng-bind=&#39;name&#39;></span><br/>" +
  "我的年龄是：<span ng-bind=&#39;age&#39;></span><br/>" +
  "在这里修改名字：<input type=&#39;text&#39; ng-model=&#39;name&#39;><br/>" +
  "<button ng-click=&#39;changeAge()&#39;>修改年龄</button>" +
  " </p>"
}

①scope: false

Wenn der Bereich auf „false“ gesetzt ist, teilt die von uns erstellte Direktive dasselbe Modell mit dem übergeordneten Bereich (eigentlich denselben Bereich). Ändern Sie es daher in den Modelldaten der Direktive im Modell des übergeordneten Geltungsbereichs widergespiegelt werden.

②scope: true

Wenn der Bereich auf true gesetzt ist, erstellen wir einen neuen Bereich, aber dieser Bereich ist ein geerbter übergeordneter Bereich; er kann so verstanden werden, dass unser neuer Bereich der erstellte Bereich ist ist ein neuer Bereich, aber während der Initialisierung werden die Eigenschaften und Methoden des übergeordneten Bereichs verwendet, um unseren neuen Bereich zu füllen. Es handelt sich nicht um denselben Bereich wie der übergeordnete Bereich.

③scope: {}

@ Dies ist der Präfixbezeichner einer einzelnen Bindung

<p my-directive my-name="{{name}}"></p>

Der Name des Attributs sollte verwendet werden – verbinden Sie die beiden Wörter, weil es so ist Die Datenbindung für ein einzelnes Element erfordert die Bindung von Daten mithilfe von {{}}.

= Dies ist ein Präfixbezeichner für die bidirektionale Datenbindung.

<p my-directive age="age"></p>

Die bidirektionale Bindung von Daten muss über den Präfixbezeichner = erreicht werden, daher kann {{}} nicht verwendet werden.

& Dies ist ein Präfixbezeichner einer Bindungsfunktionsmethode

<p my-directive change-my-age="changeAge()"></p>

Der Name des Attributs sollte durch - verbunden werden, um mehrere Wörter zu verbinden.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie die Menüberechtigungssteuerung mithilfe von React

Detaillierte Interpretation, wie Requisiten Parameter in vue.js übergeben

So implementieren Sie eine dynamische Fuzzy-Abfrage in der Eingabe

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