Eine kurze Diskussion zur detaillierten Erläuterung des Scope-Attributs von AngularJs-Anweisungen

AngularJS verwendet die Methodenklasse Directive(), um eine Direktive zu definieren:

.directive("name",function(){
  return{
     
  };
})

Das Obige ist das Hauptgerüst zum Definieren einer Direktive. Diese Methode akzeptiert zwei Parameter:

1. Der erste Parameter: name stellt den Namen der definierten Anweisung dar (angularjs verwendet diesen Namen, um diese Anweisung zu registrieren)

2 Der zweite Parameter: function, the Süßkartoffel muss zurückgegeben werden Ein Objekt oder eine Funktion, aber normalerweise geben wir ein Objekt zurück. Was auf return folgt, ist das zurückgegebene Objekt.

Das zurückgegebene Objekt enthält ein Bereichsattribut, mit dem der Umfang der Anweisung geändert wird.

Jedes Mal, wenn eine Direktive registriert wird, berücksichtigt diese Direktive eine Frage: Sollten wir meinen eigenen Bereich verwenden oder sollten wir einen untergeordneten Bereich erstellen, der vom übergeordneten Bereich erbt? isolierter Bereich (hängt nicht vom externen Bereich ab);

Der Wert des Bereichsattributs ist false, true bzw. {} entsprechend dem oben genannten Bereich, Unterbereich und der Isolationsrollendomäne.

Lassen Sie uns drei Beispiele nennen, um die Verwendung dieser Attribute vollständig zu verstehen.

1. Geltungsbereich: falsch

HTML-Code

<div ng-controller="myController">
  <div>
    <span>我的名字是</span><span ng-bind="name"></span><br/>
    <span>我的年龄是</span><span ng-bind="age"></span>
    <div my-directive></div>
  </div>
</div>
<script>
  angular.module("app",[])
    .controller("myController",function($scope){
      $scope.name = "kobe";
      $scope.age = 39;
    })
    .directive("myDirective",function(){
      return{
        scope:false,
        restrict:"A",
        template:"<div><h1>下面的部分是我们创建指令时生成的</h1>"+
            "我的名字是:<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;>"+
            "</div>"
      };
    })
</script>

Wirkung:

Hierbei Der Gültigkeitsbereich des Befehls entspricht dem Gültigkeitsbereich von myController. Wenn wir also einen neuen Namen in das Eingabefeld eingeben, ändern sich die Namen an den oberen und unteren Stellen entsprechend, wie in der folgenden Abbildung dargestellt:

2. Gültigkeitsbereich: wahr

Der Effekt, wenn wir zu diesem Zeitpunkt einfach einen neuen Namen in das Eingabefeld eingeben, tritt ein anderer Effekt als beim ersten Experiment ein, wie in der Abbildung gezeigt Abbildung:

Hier hat sich der Name im oberen Teil nicht geändert, wohl aber der Name im unteren Teil.

In diesem Experiment müssen wir auf zwei Punkte achten:

1. Nach dem Aufrufen oder Aktualisieren der Seite sind die oberen und unteren Namen gleich, weil: wenn Umfang wahr ist, erben die Unterfunktionsdomänen die Eigenschaften und Methoden ihrer übergeordneten Rolle. Obwohl Name und Alter im untergeordneten Bereich nicht definiert sind, kann

daher von myController im übergeordneten Bereich geerbt werden. Daher werden oben und unten der gleiche Name und das gleiche Alter angezeigt.

2. Nach der Eingabe eines neuen Namens bleibt der obere Teil unverändert und der untere Teil ändert sich. Der Grund ist: Wir ändern den Namen und das Alter im untergeordneten Bereich, sodass sich der untere Name ändert und der obere Der Name gehört zum übergeordneten Bereich. Der übergeordnete Bereich kann nicht auf den untergeordneten Bereich zugreifen.

Daher ändert sich der Wert des obigen Namens nicht.

3. Geltungsbereich: { }

Der Geltungsbereichsteil des Befehls wird wie folgt geändert:

scope:{
  name:"@",
  age:"@"
},

<div my-directive name="aaa" age="33"></div>