Qualcuno può spiegare la differenza tra $ scope e $ rootScope?
penso
Possiamo ottenere le proprietà ng-model in un controller particolare dalla pagina specifica usando questo.
Possiamo ottenere tutte le proprietà ng-model in qualsiasi controller da qualsiasi pagina usando questo.
È corretto? O qualsiasi altra cosa?
Risposte:
"$ rootScope" è un oggetto genitore di tutti gli oggetti angolari "$ scope" creati in una pagina web.
$ scope viene creato con ng-controllermentre $ rootscope viene creato con ng-app.
La differenza principale è la disponibilità dell'immobile assegnato con l'oggetto. Una proprietà assegnata con $scopenon può essere utilizzata al di fuori del controller in cui è definita mentre una proprietà assegnata con $rootScopepuò essere utilizzata ovunque.
Esempio: se nell'esempio sotto si sostituisce $rootScopecon $scopela proprietà department non verrà popolata dal primo controller nel secondo
angular.module('example', [])
.controller('GreetController', ['$scope', '$rootScope',
function($scope, $rootScope) {
$scope.name = 'World';
$rootScope.department = 'Angular';
}
])
.controller('ListController', ['$scope',
function($scope) {
$scope.names = ['Igor', 'Misko', 'Vojta'];
}
]);<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="example">
<div class="show-scope-demo">
<div ng-controller="GreetController">
Hello {{name}}!
</div>
<div ng-controller="ListController">
<ol>
<li ng-repeat="name in names">{{name}} from {{department}}</li>
</ol>
</div>
</div>
</body>Secondo Angular's Developer's Guide to Scopes :
Ogni applicazione Angular ha esattamente un ambito radice, ma può avere diversi ambiti figlio. L'applicazione può avere più ambiti, perché alcune direttive creano nuovi ambiti figlio (fare riferimento alla documentazione della direttiva per vedere quali direttive creano nuovi ambiti). Quando vengono creati nuovi ambiti, vengono aggiunti come figli dell'ambito padre. Questo crea una struttura ad albero che è parallela al DOM a cui sono collegati.
Sia i controllori che le direttive fanno riferimento all'ambito, ma non l'uno all'altro. Questa disposizione isola il controller dalla direttiva e dal DOM. Questo è un punto importante poiché rende i controller agnostici, il che migliora notevolmente la storia dei test delle applicazioni.
In un altro modo possiamo guardare a questo; $rootScopeè globale mentre $scopeè locale. Quando Controllerè assegnato a una pagina, quindi una $scopevariabile può essere utilizzata qui perché si lega a questo controller. Ma quando vogliamo condividere il suo valore con altri controller o servizi, allora $rootScopeviene utilizzato (** ci sono modi alternativi, possiamo condividere i valori ma in questo caso lo vogliamo usare $rootScope).
La tua seconda domanda su come definire queste due parole è corretta.
Infine un po 'fuori strada, si prega di usare $rootScopecon attenzione. Simile al modo in cui usi le variabili globali, può essere un problema eseguire il debug e potresti accidentalmente cambiare la variabile globale da qualche parte all'interno di un timer o qualcosa che rende la tua lettura errata.
Ogni applicazione ha almeno un singolo rootScope e il suo ciclo di vita è lo stesso dell'app e ogni controller può avere il proprio ambito, che non è condiviso con altri.
Dai un'occhiata a questo articolo:
https://github.com/angular/angular.js/wiki/Understanding-Scopes
Ti consiglio di leggere la documentazione ufficiale di Angular approfondita per gli ambiti. Inizia dalla sezione "Gerarchie di ambito":
https://docs.angularjs.org/guide/scope
In sostanza, $ rootScope e $ scope identificano entrambi parti specifiche del DOM all'interno del quale
Tutto ciò che appartiene a $ rootScope è disponibile a livello globale nella tua app Angular, mentre tutto ciò che appartiene a $ scope è disponibile nella parte del DOM a cui si applica tale ambito.
$ RootScope viene applicato all'elemento DOM che è l'elemento radice per l'app Angular (da cui il nome $ rootScope). Quando aggiungi la direttiva ng-app a un elemento del DOM, questo diventa l'elemento radice del DOM all'interno del quale è disponibile $ rootScope. In altre parole, le proprietà ecc. Di $ rootScope saranno disponibili in tutta l'applicazione Angular.
Un $ scope angolare (e tutte le sue variabili e operazioni) è disponibile per un particolare sottoinsieme del DOM all'interno dell'applicazione. In particolare, lo $ scope per ogni particolare controller è disponibile per la parte del DOM a cui è stato applicato quel particolare controller (usando la direttiva ng-controller). Si noti tuttavia che alcune direttive, ad esempio ng-repeat, quando applicate all'interno di una parte del DOM in cui è stato applicato il controller, possono creare ambiti secondari dell'ambito principale - all'interno dello stesso controller - un controller non contiene necessariamente un solo ambito.
Se guardi l'HTML generato quando esegui la tua app Angular, puoi facilmente vedere quali elementi DOM 'contengono' uno scope, poiché Angular aggiunge la classe ng-scope su qualsiasi elemento a cui è stato applicato uno scope (incluso l'elemento root dell'app, che ha $ rootScope).
A proposito, il segno '$' all'inizio di $ scope e $ rootScope è semplicemente un identificatore in Angular per cose riservate da Angular.
Si noti che l'utilizzo di $ rootScope per la condivisione di variabili ecc. Tra moduli e controller non è generalmente considerato una best practice. Gli sviluppatori JavaScript parlano di evitare "l'inquinamento" dell'ambito globale condividendo le variabili lì, poiché potrebbero verificarsi conflitti in seguito se una variabile con lo stesso nome viene utilizzata da qualche altra parte, senza che lo sviluppatore si accorga che è già dichiarata su $ rootScope. L'importanza di ciò aumenta con le dimensioni dell'applicazione e del team che la sta sviluppando. Idealmente, $ rootScope conterrà solo costanti o variabili statiche, che devono essere coerenti in ogni momento nell'app. Un modo migliore per condividere cose tra i moduli potrebbe essere quello di utilizzare servizi e fabbriche, che è un altro argomento!
Entrambi sono oggetti script Java e la differenza è illustrata dal diagramma come sotto.
NTB: la
prima applicazione angolare prova a trovare la proprietà di qualsiasi modello o funzione in $ scope, se non trova la proprietà in $ scope, quindi cerca in ambito padre nella gerarchia superiore. Se la proprietà non viene ancora trovata nella gerarchia superiore, angular tenta di risolversi in $ rootscope.
Nuovi stili, come AngularJS Styleguide di John Papa , suggeriscono che non dovremmo utilizzarli $scopeper salvare affatto le proprietà della pagina corrente. Invece dovremmo usare l' controllerAs with vmapproccio in cui la vista si lega all'oggetto controller stesso. Quindi utilizzare una variabile di acquisizione per questo quando si utilizza la sintassi controllerAs. Scegli un nome di variabile coerente come vm, che sta per ViewModel.
Avrai comunque bisogno di $scopeper le sue capacità di visione.