Erläuterung des Geltungsbereichs in AngularJS

Dieser Artikel stellt hauptsächlich die detaillierte Erklärung des Umfangs beim AngularJS-Lernen vor. Jetzt teile ich ihn mit Ihnen und gebe ihn als Referenz.

Einführung

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

Scope ist ein Objekt, das das Anwendungsdatenmodell mit verfügbaren Methoden und Eigenschaften speichert.

Der Bereich kann auf Ansichten und Controller angewendet werden.

Scope ist die Verbindung zwischen dem Controller und der Ansicht der Webanwendung:

Controller--> Scope--> --> Ansicht (DOM)

Wenn Sie einen Controller in AngularJS erstellen, können Sie das $scope-Objekt als Parameter übergeben:

<p ng-controller="myCtrl">
<h1>{{name}}</h1>
</p>

<script>
var app = angular.module(&#39;test&#39;, []);
app.controller(&#39;myCtrl&#39;, function($scope) {
  $scope.name = "天下行走";
});
</script>

Ausgabeergebnis: Erstellen Sie einen Attributnamen „name“ im World Walk

-Controller, der dem Namen in der Ansicht mit {{ }} entspricht.

Beim Hinzufügen des $scope-Objekts im Controller kann die Ansicht (HTML) diese Eigenschaften erhalten.

In der Ansicht müssen Sie nicht das Präfix $scope hinzufügen, sondern nur den Attributnamen, wie zum Beispiel: {{name}}.

Die AngularJS-Anwendung setzt sich wie folgt zusammen:

Ansicht (Ansicht), also HTML.

Modell (Modell), die in der aktuellen Ansicht verfügbaren Daten.

Controller (Controller), eine JavaScript-Funktion, die Eigenschaften hinzufügen oder ändern kann.

Ein Bereich ist ein JavaScript-Objekt mit Eigenschaften und Methoden, die in Ansichten und Controllern verwendet werden können.

Sehen Sie sich ein anderes Beispiel an:

<p ng-app="myApp" ng-controller="myCtrl">
  输入你的名字：
  <input ng-model="name">
  <h1>{{greeting}}</h1>
  <button ng-click=&#39;sayHello()&#39;>greet</button>  
</p>

<script>
var app = angular.module(&#39;myApp&#39;, []);
app.controller(&#39;myCtrl&#39;, function($scope) {
  $scope.name = "张三";
  $scope.sayHello = function() {
    $scope.greeting = $scope.name + &#39;是个笨蛋!&#39;;
  };
});
</script>

In diesem Beispiel

1. Controller: MyCtrl , der auf $scope verweist und darauf registriert ist. Es hat zwei Attribute und eine Methode

2. $scope-Objekt: enthält das für das obige Beispiel erforderliche Datenmodell, einschließlich Namensattribut und Begrüßungsattribut (Hinweis: Dies wird in der registrierten Methode sayHello() verwendet, wenn Aufruf) und sayHello()-Methode

3. Ansicht: verfügt über ein Eingabefeld, eine Schaltfläche und einen Inhaltsblock, der eine bidirektionale Bindung verwendet, um Daten anzuzeigen

Dann hat das gesamte Beispiel aus Sicht der Controller-Initiierung zwei Prozesse:

1. Der Controller schreibt Attribute in den Bereich:

in die Rolle. Der Name wird in der Domäne zugewiesen ein Wert, und dann benachrichtigt der Bereich die Eingabedaten in der Ansicht, dass sie sich geändert haben. Da die Eingabe eine bidirektionale Bindung über das NG-Modell realisiert, kann sie die Namensänderung erkennen und dann den geänderten Wert in der Ansicht rendern

2. Der Controller schreibt die Methode

in den Bereich, um der Methode sayHello() im Bereich einen Wert zuzuweisen. Diese Methode wird von der Schaltfläche in der Ansicht aufgerufen, da die Schaltfläche gebunden ist zu dieser Methode über ng-click. Wenn der Benutzer auf die Schaltfläche klickt, wird sayHello() aufgerufen. Diese Methode liest das Namensattribut im Bereich, fügt die Suffixzeichenfolge hinzu und weist sie dann dem neu erstellten Begrüßungsattribut zu Umfang

Der Prozess des gesamten Beispiels if Aus Sicht der Ansicht besteht er hauptsächlich aus den folgenden drei Teilen:

1 Rendering-Logik in der Eingabe: Zeigt die bidirektionale Bindung von den Bereich über ng-model und ein bestimmtes Formularelement in der Ansicht

1. Rufen Sie ihn entsprechend dem Namen im ng-model aus dem Bereich ab. Wenn bereits ein Wert vorhanden ist, füllen Sie ihn mit dem aktuellen aus Eingabefeld mit diesem Standardwert

2. Akzeptieren Sie Benutzereingaben und übergeben Sie die vom Benutzer eingegebene Zeichenfolge an name. Zu diesem Zeitpunkt wird der Attributwert im Bereich in Echtzeit auf den Wert aktualisiert vom Benutzer eingegeben

2. Logik in der Schaltfläche

Benutzerklicks akzeptieren und die sayHello()-Methode im Bereich aufrufen

3. Rendering-Logik von {{greeting}}

1. Anfangsphase: Wenn der Benutzer nicht auf die Schaltfläche klickt, wird der Inhalt nicht angezeigt

2. Wertphase: Nachdem der Benutzer geklickt hat, ruft dieser Ausdruck das Begrüßungsattribut aus dem Bereich ab. In diesem Fall sind die Domäne und der Controller identisch. Zu diesem Zeitpunkt ist das Begrüßungsattribut im Bereich bereits vorhanden und dieses Attribut wird abgerufen Diesmal

3. Berechnungsphase: im aktuellen Bereich Gehen Sie nach unten, berechnen Sie den Begrüßungsausdruck und rendern Sie dann die Ansicht, um zu zeigen, dass Zhang San ein Narr ist!

Nachdem wir den Beispielprozess aus den beiden oben genannten Perspektiven analysiert haben, können wir wissen: Das Bereichsobjekt und seine Eigenschaften sind die einzige Datenquelle für das Rendern von Ansichten.

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

Verwandte Artikel:

Lösung für AngularJS-Ausführungsfehler nach Verwendung der gulp-uglify-Komprimierung

Vue+ElementUI implementiert dynamisches Rendern von Formularen, Visuelle Konfigurationsmethode

Eine kurze Diskussion über die Lösung für übermäßig große Dateien nach dem Packen von Webpacks

Lösen Sie tatsächlich das Problem des UglifyJs-Fehlers beim Packen von iview (ausführliches Tutorial)

Das Problem der Aktualisierung von 404 nach der Verwendung von Vue zum Packen des Projekts (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonErläuterung des Geltungsbereichs in AngularJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!