Scope und rootScope in AngularJS
In früheren Artikeln haben wir die MVC-Struktur von AngularJS vorübergehend verstanden:
- Ansicht: HTML-Anzeigedaten
- Modell: Daten zum Arbeiten mit der aktuellen Ansicht
- Controller: logischer Fluss, der in AngularJS-Funktionen geschrieben ist und zum Hinzufügen, Bearbeiten und Löschen von Daten verwendet wird
$scope ist ein Objekt (Objekt), das für die Datenkommunikation zwischen dem Controller und der Ansicht der Anwendung zuständig ist, wir können es als Brücke verstehen, wenn sich die $scope-Variable ändert, werden die Daten im Controller und der Ansicht aktualisiert. Dies geschieht in Form eines Ausdrucks, dh in dem Modell, das gemäß den Spezifikationen deklariert wird, wird das Scope-Objekt die entsprechende Aktion (Funktion) oder Daten übergeben und wir können Ereignisse durch dieses Objekt leiten. .
Scopes bietet die gleichen Ausdrücke wie die heutigen Template-Engines, um beispielsweise den Benutzernamen anzuzeigen, deklarieren wir ihn als {{username}} und im Controller müssen wir nur $scope.username = 'toanngo92' dem Objekt zuweisen. Dies wird einen Schlüssel annehmen benannten Benutzernamen und weisen Sie ihn der Ansicht {{Benutzername}} zu.
Mục lục
Geltungsbereich von $scope
In einer AngularJS-Anwendung können wir viele Controller, viele verschiedene $scopes haben. Zurück zum Beispiel unten:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Example Controller</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> </head> <body> <div ng-app="examController"> <div ng-controller="headerController"> {{name}} - {{data}} </div> <div ng-controller="mainController"> {{name}} - {{data}} </div> <div ng-controller="footerController"> {{name}} - {{data}} </div> </div> <script> var app = angular.module('examController', []); app.controller('headerController', function($scope){ $scope.name = "This is header"; }); app.controller('mainController', function($scope){ $scope.name = "This is main"; $scope.data = "main data"; }); app.controller('footerController', function($scope){ $scope.name = "This is footer"; }); </script> </body> </html>Wir sehen in den Ansichten, die mit dem entsprechenden Controller verknüpft sind, dass der {{data}}-Wert unterschiedlich ist, aber jeder Controller, die Dateneigenschaft in der Variablen in jedem Controller ist anders. Dies beweist, dass sich der Gültigkeitsbereich der $scope-Variablen nur im entsprechenden Controller befindet.
$rootScope und die Hierarchie von $scope
Beispiel 1:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="angular.min.js"></script> <!-- <script src="angular-route.min.js"></script> --> </head> <body ng-app="toanApp"> <div >Data rootscope: {{name}}</div> <div ng-controller="indexController"> <input ng-model="name" value=""/> <p> Data scope {{name}}</p> <button ng-click="changename()" >click</button> </div> <script> var app = angular.module("toanApp",[]); app.run(function($rootScope){ $rootScope.name = "root scope"; }); app.controller( "indexController", function($scope){ // console.log(languages); $scope.name = "controller scope"; $scope.changename = function(e){ $scope.name = "test"; } } ); </script> </body> </html>Ergebnis beim Drucken und bei der Interaktion mit der Eingabe
Mit dem obigen Beispiel sehen wir, dass wir ein div verwendet und den Modellnamen für die Ansicht aufgerufen haben, aber dieses Modell gehört zu keinem Controller, wir verstehen unter der Skriptebene, durch die app.run() Methode, die wir initialisiert haben ein globales Modell mit dem Namen name, sodass wir den Variablennamen darstellen können, obwohl es sich in keinem Controller befindet. und für den Modellnamen in der div-Struktur innerhalb von indexController sehen wir beim Aktualisieren von Daten, dass sich das Modell im Controller ändert, aber nichts mit dem externen Modell zu tun hat. Es ist sinnvoll, dass sich 2 Modellnamen in $scope und $rootScope befinden , obwohl sie denselben Namen haben , sie sind in der Natur nicht verwandt
Beispiel #2 :
Jetzt werden wir die Syntax des AngularJS-Codes wie folgt ein wenig ändern:
In diesem Beispiel besteht der Hauptunterschied darin, dass der erste JS-Controller einen $rootScope-Parameter hat und der zweite Controller nichts verarbeitet. Führen Sie es aus, Sie werden die folgende Oberfläche sehen:
Offensichtlich übergibt der obige Code den Wert nicht in beiden Controllern an $scope, aber die Ansicht hat ihn immer noch? Das liegt daran, dass die Variable $rootScope. Dies bedeutet, dass beim Ausführen der Anwendung automatisch ein $rootScope erstellt wird, $rootScope ist die oberste Ebene, sodass alle darin enthaltenen $Scopes abgedeckt werden. Dies ist nicht dasselbe wie $scope, das nur im Bereich des Controllers betroffen ist .
Betrachten Sie das folgende Beispiel:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Example Controller</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> </head> <body> <div ng-app="examRootScope"> <div ng-controller="headerController"> {{name}} - {{data}} {{data_global}} </div> <div ng-controller="mainController"> {{name}} - {{data}} </div> <div ng-controller="footerController"> {{name}} - {{data}} </div> </div> <script> var app = angular.module('examRootScope', []); app.controller('headerController', function($scope,$rootScope){ $scope.name = "This is header"; $scope.data= "header data scope"; $rootScope.data = "header data root scope"; }); app.controller('mainController', function($scope){ $scope.name = "This is main"; $scope.data = "main data"; }); app.controller('footerController', function($scope,$rootScope){ $scope.name = "This is footer"; $scope.data = "footer data scope"; $rootScope.data_global = "thuoc tinh dung chung"; }); </script> </body> </html>Ergebnisse auf dem Bildschirm drucken:
Wenn Sie im obigen Beispiel einige weitere Informationen hinzufügen, müssen Sie auf zwei Punkte achten:
- Im headerController werden die beiden Eigenschaften $scope.data und $rootScope.data gleich benannt (data), aber wenn die Ansicht mit einem Ausdruck gedruckt wird, wird der Wert aus der data-Eigenschaft des $scope-Anlegeplatzes genommen, was beweist, ob Falls das Modell denselben Namen hat, hat $scope Vorrang vor $rootScope
- Im footerController gibt es eine Eigenschaft namens data_global, die ich selbst festgelegt habe, aber in der Ansichtsebene, die dem headerController zugeordnet ist, habe ich dieses Modell data_global absichtlich genannt, aber die Ansichten werden immer noch erkannt, dies beweist, dass die Daten in $ rootScope global sind (can verwendet werden, um Daten zwischen Controllern auszutauschen oder weiterzugeben)
Verschachtelter Bereich (verschachtelter Bereich)
In AngularJS haben wir das Konzept von verschachtelten Controllern, ähnlich verschachtelten Bereichen, wobei diese Situation sehr vorsichtig sein muss, da es viele Situationen geben wird, in denen es unmöglich ist, zu unterscheiden, welcher Bereich verwendet wird. Betrachten Sie das folgende Beispiel:
<!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> </head> <body ng-controller="parentController"> What controller am I? {{parentVariable}} <div ng-controller="childController"> What controller am I? {{childVariable}} {{parentVariable}} <button ng-click="childFunction()"> Click me to override! </button> </div> </body> <script> var app = angular.module('myApp', []); app.controller('parentController', function ($scope) { $scope.parentVariable = "I'm the parent"; }); app.controller('childController', function ($scope) { $scope.childVariable = "I'm the child"; $scope.childFunction = function () { $scope.parentVariable = "Parent changed!"; console.log($scope); }; }); </script> </html>Ergebnis beim Ausführen des Tests und Klicken auf die Schaltfläche zum Überschreiben:
Das Problem hier, beim Protokollieren der $scope-Variablen haben sich die parentVariable-Daten geändert, aber die parentVariable im parentController wird nicht aktualisiert, dieses Problem wird wirklich verwirrend und unbequem im Codierungsprozess sein, also Ratschläge für Sie, Sie sollten Variablen klar benennen , wenn Sie verschachtelte Controller verwenden müssen, sollten Sie die Struktur sorgfältig lernen, um unerwartete Fehler zu vermeiden.
Auch wenn wir über den Umfang sprechen, wird es viele Probleme geben, aber in Bezug auf den Ansatz sind diese Konzepte die Dinge, die wir begreifen müssen, bevor wir eine echte Anwendung mit anglejs erstellen.
Bài viết liên quan:
Dịch vụ thiết kế Wesbite
