Ambito angolare JS
L'ambito è la parte vincolante tra l'HTML (vista) e il JavaScript (controller).
L'ambito è un oggetto con le proprietà ei metodi disponibili.
L'ambito è disponibile sia per la vista che per il controller.
Come utilizzare l'ambito?
Quando crei un controller in AngularJS, passi l' $scopeoggetto come argomento:
Esempio
Le proprietà realizzate nel controller possono essere richiamate nella vista:
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{carname}}</h1>
</div>
<script>
var app = angular.module('myApp',
[]);
app.controller('myCtrl', function($scope) {
$scope.carname
= "Volvo";
});
</script>
Quando si aggiungono proprietà $scope
all'oggetto nel controller, la vista (HTML) ottiene l'accesso a queste proprietà.
Nella vista, non usi il prefisso $scope, fai solo riferimento a un nome di proprietà, come {{carname}}.
Capire l'ambito
Se consideriamo un'applicazione AngularJS composta da:
- Visualizza, che è l'HTML.
- Modello, ovvero i dati disponibili per la vista corrente.
- Controller, che è la funzione JavaScript che apporta/modifica/rimuove/controlla i dati.
Allora lo scopo è il Modello.
L'ambito è un oggetto JavaScript con proprietà e metodi, disponibili sia per la vista che per il controller.
Esempio
Se si apportano modifiche alla vista, il modello e il controller verranno aggiornati:
<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="name">
<h1>My name is {{name}}</h1>
</div>
<script>
var app = angular.module('myApp',
[]);
app.controller('myCtrl', function($scope) {
$scope.name
= "John Doe";
});
</script>
Conosci il tuo ambito
È importante sapere in qualsiasi momento con quale ambito si ha a che fare.
Nei due esempi precedenti c'è un solo ambito, quindi conoscere il proprio ambito non è un problema, ma per applicazioni più grandi possono esserci sezioni nel DOM HTML che possono accedere solo a determinati ambiti.
Esempio
Quando si ha a che fare con la ng-repeatdirettiva, ogni ripetizione ha accesso all'oggetto di ripetizione corrente:
<div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in names">{{x}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp',
[]);
app.controller('myCtrl', function($scope) {
$scope.names
= ["Emil", "Tobias", "Linus"];
});
</script>
Ogni <li>elemento ha accesso all'oggetto di ripetizione corrente, in questo caso una stringa, a cui si fa riferimento utilizzando x.
Ambito di radice
Tutte le applicazioni hanno un $rootScopeambito che è l'ambito creato sull'elemento HTML che contiene la ng-appdirettiva.
Il rootScope è disponibile nell'intera applicazione.
Se una variabile ha lo stesso nome sia nell'ambito corrente che in rootScope, l'applicazione utilizza quella nell'ambito corrente.
Esempio
Una variabile denominata "color" esiste sia nell'ambito del controller che in rootScope:
<body ng-app="myApp">
<p>The rootScope's favorite color:</p>
<h1>{{color}}</h1>
<div ng-controller="myCtrl">
<p>The scope of the controller's favorite color:</p>
<h1>{{color}}</h1>
</div>
<p>The rootScope's favorite color is
still:</p>
<h1>{{color}}</h1>
<script>
var app = angular.module('myApp', []);
app.run(function($rootScope) {
$rootScope.color = 'blue';
});
app.controller('myCtrl',
function($scope) {
$scope.color = "red";
});
</script>
</body>