AngularJS Scope (Umfang)
Umfang ist die Verbindung zwischen HTML (Ansicht) und JavaScript (Controller).
Scope ist ein Objekt mit verfügbaren Methoden und Eigenschaften.
Der Umfang kann auf Ansichten und Controller angewendet werden.
So verwenden Sie den Umfang
Wenn Sie einen Controller in AngularJS erstellen, können Sie das $ Scope -Objekt als Parameter übergeben:
AngularJS -Instanz
Die Eigenschaften im Controller entsprechen den Eigenschaften der Ansicht:
<! DocType html> <html> <kopf> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ng-controller = "myctrl"> {{carname}} </div> <script> var app = angular.module ('MyApp', []); app.controller ('myctrl', function ($ scope) {$ scarname.carname = "volvo"; Der in der Ansicht in {{}} verwendete Name. </p> </body> </htmlAuslaufergebnisse:
Volvo
Erstellen Sie einen Attributnamen "CarName" im Controller, der dem in der Ansicht in {{}} verwendeten Namen entspricht.
Beim Hinzufügen eines $ Scope -Objekts zum Controller kann die Ansicht (HTML) diese Eigenschaften erhalten.
In der Ansicht müssen Sie das Präfix $ Scope nicht hinzufügen. Sie müssen nur den Attributnamen hinzufügen, wie: {{CarName}}.
Umfangsübersicht
AngularJS -Anwendungszusammensetzung lautet wie folgt:
Ansicht (Ansicht), das heißt, HTML.
Modell, Daten in der aktuellen Ansicht verfügbar.
Controller, d. H. JavaScript -Funktion, kann Eigenschaften hinzufügen oder ändern.
Umfang ist das Modell.
Scope ist ein JavaScript -Objekt mit Eigenschaften und Methoden, die in Ansichten und Controllern verwendet werden können.
AngularJS -Instanz
Wenn Sie die Ansicht ändern, wird das Modell und der Controller auch entsprechend aktualisiert:
<! DocType html> <html> <kopf> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ng-controller = "myctrl"> <input ng-model = "name"> Mein Name ist {{name}} </div> <skript> var app = angular.module ('myapp', []); app.controller ('myctrl', Funktion ($ scrope) {$ scope. Das Eingabefeld beeinflusst das Modell und beeinflusst natürlich auch den entsprechenden Attributwert des Controllers. </p> </body> </html>Auslaufergebnisse:
Mein Name ist John Doe
Wenn Sie den Wert im Eingangsfeld ändern, wirkt sich dies auf das Modell aus und wirkt sich natürlich auch auf den entsprechenden Attributwert des Controllers aus.
Zielfernrohr
Es ist sehr wichtig zu wissen, welchen Umfang Sie derzeit verwenden.
In den beiden oben genannten Fällen gibt es nur einen Bereichsbereich, sodass es relativ einfach zu verarbeiten ist. In großen Projekten gibt es jedoch mehrere Bereiche in HTML DOM. Zu diesem Zeitpunkt müssen Sie wissen, welchen Umfang dem von Ihnen verwendeten Bereich entspricht.
AngularJS -Instanz
Wenn wir die NG-Repeat-Direktive verwenden, greift jeder Duplikat auf das aktuelle doppelte Objekt:
<! DocType html> <html> <kopf> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ng-controller = "myctrl"> <ul> <li ng-repeat = "x in Namen"> {{x}} </li> </ul> </div> <script> var app = angular.module ('myapp', []); "Linus"];}); </script> </body> </html>Auslaufergebnisse:
Jedes <li> Element kann auf das aktuelle doppelte Objekt zugreifen, das einer Zeichenfolge entspricht und durch die Variable x dargestellt wird.
Wurzelbereich
Alle Anwendungen haben ein $ rootscope, das in allen in der NG-App-Anweisung enthaltenen HTML-Elementen verwendet werden kann.
$ rootscope kann während der gesamten Anwendung verwendet werden. Es ist die Brücke des Umfangs in jedem Controller. Mit RootScope definierte Werte können in jedem Controller verwendet werden.
AngularJS -Instanz
Geben Sie beim Erstellen eines Controllers $ rootscope als Parameter über und können in der Anwendung verwendet werden:
<! DocType html> <html> <kopf> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" Nachname ist {{Lastname}} Familienmitglieder: <ul> <li ng-repeat = "x in Namen"> {{x}} {{Lastname}} </li> </ul> </div> <script> var app = Angular.module ('MyApp', [] app.Controller ('myctrl', $ scopt '$, app.controller (' ’myctrer), $ app.controller ('myctr', $ $, app. $ scope.names = ["emil", "tobias", "linus"]; </p> </body> </html>Auslaufergebnisse:
Der Nachname ist Mitglied der Familie Refsnes:
Beachten Sie, dass $ rootScope sowohl innerhalb als auch außerhalb des Schleifenobjekts zugänglich ist.