Il campo di applicazione è la parte vincolante tra il codice HTML (vista) e JavaScript (controllore).
Il campo di applicazione è un oggetto con le proprietà ei metodi disponibili.
Il campo di applicazione è disponibile sia per la vista e il controllore.
Come utilizzare il campo di applicazione?
Quando si effettua un controller in AngularJS, si passa il $scope oggetto come argomento:
Esempio
Proprietà fatte nel controller, possono essere indicati 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> Prova tu stesso " Quando si aggiungono le proprietà al $scope oggetto nel controller, la vista (HTML) ottiene l'accesso a queste proprietà.
Nella vista, non si utilizza il prefisso $scope , basta fare riferimento a un propertyname, come {{carname}} .
Comprendere la portata
Se consideriamo un'applicazione AngularJS consistere:
- Guarda, che è il codice HTML.
- Modello, che sono i dati disponibili per la visualizzazione corrente.
- Controller, che è la funzione JavaScript che rende / modifiche / rimuove / controlla i dati.
Poi il campo di applicazione è il modello.
Il campo di applicazione è un oggetto JavaScript con proprietà e metodi, che sono disponibili sia per la vista e il controllore.
Esempio
Se si apportano modifiche nella vista, il modello e il controller saranno 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> Prova tu stesso " Conosci il tuo Scope
E 'importante sapere che ambito si sta trattando, in qualsiasi momento.
Nei due esempi sopra vi è un solo ambito, in modo da sapere il vostro scopo non è un problema, ma per le applicazioni più grandi ci può essere sezioni nel DOM HTML che possono accedere solo determinati ambiti.
Esempio
Quando si tratta con il ng-repeat direttiva, 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>
Prova tu stesso " Ogni <li> elemento ha accesso all'oggetto ripetizione corrente, in questo caso una stringa, che è indicato utilizzando x .
Root Scope
Tutte le applicazioni hanno un $rootScope che è l'ambito creato l'elemento HTML che contiene il ng-app direttiva.
Il rootScope è disponibile in tutta la domanda.
Se una variabile ha lo stesso nome sia nel campo di applicazione e nella rootScope, l'applicazione utilizzare quello nell'ambito corrente.
Esempio
Una variabile denominata "colore" esiste in ambito sia del controller e nel 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> Prova tu stesso "