Scope e rootScope in AngularJS
Negli articoli precedenti, abbiamo temporaneamente compreso la struttura MVC di AngularJS:
- Visualizza: dati di visualizzazione HTML
- Modello: dati per lavorare con la vista corrente
- Controller: flusso logico scritto nelle funzioni angularJS, utilizzato per aggiungere, modificare ed eliminare dati
$scope è un oggetto (oggetto) responsabile della comunicazione dei dati tra il controller e la vista dell'applicazione, possiamo intenderlo come un bridge, quando la variabile $scope cambia, i dati nel controller e la vista vengono aggiornati sincronizzati. Sarà fatto sotto forma di un'espressione, cioè nel modello che sarà dichiarato secondo le specifiche, l'oggetto scope passerà l'azione (funzione) o i dati corrispondenti e possiamo passare gli eventi attraverso questo oggetto. .
Scopes fornisce le stesse espressioni dei motori di template odierni, ad esempio per visualizzare il nome utente lo dichiareremo come {{username}} e nel controller dobbiamo solo assegnare $scope.username = 'toanngo92' l'oggetto Questo richiederà una chiave nome utente denominato e assegnarlo per visualizzare {{nomeutente}}.
Mục lục
Ambito di $ambito
In un'applicazione AngularJS, possiamo avere molti controller, molti $scopes diversi. Tornando all'esempio seguente:
<!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>Nelle viste collegate al controller corrispondente vediamo che il valore {{data}} è diverso, ma ogni controller, la proprietà dei dati nella variabile in ogni controller è diverso. Ciò dimostra che l'ambito della variabile $scope è solo nel controller corrispondente.
$rootScope e la gerarchia di $scope
Esempio 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>Risultato durante la stampa e l'interazione con l'input
Con l'esempio sopra, vediamo che abbiamo usato un div e chiamato il nome del modello alla vista, ma questo modello non appartiene a nessun controller, capiamo sotto il livello di script, attraverso il metodo app.run() , abbiamo inizializzato un modello globale chiamato name, quindi anche se non è in nessun controller, possiamo comunque rappresentare il nome della variabile. e per il nome del modello nella struttura div all'interno di indexController, vediamo quando si aggiornano i dati, il modello nel controller cambia ma non ha nulla a che fare con il modello esterno, ha senso, 2 nomi di modello sono in $scope e $rootScope anche se hanno lo stesso nome , non sono di natura correlata
Esempio #2 :
Ora cambieremo un po' la sintassi del codice AngularJS come segue:
In questo esempio, la differenza principale è che il primo controller JS ha un parametro $rootScope e il secondo controller non gestisce nulla. Eseguilo, vedrai la seguente interfaccia:
Quindi ovviamente il codice sopra non passa il valore a $ scope in entrambi i controller, ma la vista ce l'ha ancora? Questo perché la variabile $rootScope. Ciò significa che quando l'applicazione viene eseguita, ci sarà un $rootScope creato automaticamente, $rootScope è il livello superiore quindi coprirà tutti gli $scope al suo interno, questo non è lo stesso di $scope che ha effetto solo nell'ambito del controller .
Considera l'esempio seguente:
<!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>Stampa i risultati sullo schermo:
Aggiungendo qualche informazione in più nell'esempio sopra, ci sono 2 punti a cui prestare attenzione:
- In headerController, le due proprietà $scope.data e $rootScope.data hanno lo stesso nome (data), ma quando si stampa la vista con un'espressione, il valore sarà preso dalla proprietà data dell'ancoraggio $scope, dimostrando se nel caso in cui il modello abbia lo stesso nome, $scope avrà la precedenza su $rootScope
- Nel footerController, c'è una proprietà denominata data_global che ho impostato io stesso, ma nel livello di visualizzazione associato a headerController, ho chiamato intenzionalmente questo modello data_global, ma le viste sono ancora riconosciute, questo dimostra che i dati in $ rootScope sono globali (può essere utilizzato per condividere o trasmettere dati tra titolari del trattamento)
Ambito nidificato (ambito nidificato)
In angularJS, abbiamo il concetto di controller nidificati, scope nidificati in modo simile, con questa situazione è necessario prestare molta attenzione perché ci saranno molte situazioni in cui è impossibile distinguere quale ambito sta utilizzando. Considera l'esempio seguente:
<!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>Risultato quando si esegue il test e si fa clic sul pulsante di sostituzione:
Il problema qui, quando si registra la variabile $ scope, i dati parentVariable sono cambiati, ma la parentVariable nel parentController non è aggiornata, questo problema sarà davvero confuso e scomodo nel processo di codifica, quindi consiglio Per te, dovresti nominare chiaramente le variabili , se devi usare controller nidificati, dovresti imparare attentamente la struttura per evitare errori imprevisti.
Inoltre, se parliamo di ambito, ci saranno molti problemi, ma in termini di approccio, questi concetti sono le cose che dobbiamo comprendere prima di iniziare a creare una vera applicazione con angularjs.
