Scope AngularJS

Lo scope (scope) è la parte di collegamento tra HTML (vista) e JavaScript (controller).

Lo scope è un oggetto che ha proprietà e metodi disponibili.

Lo scope è disponibile sia per la vista che per il controller.

Come utilizzare lo scope?

Quando crei un controller in AngularJS, tu $scope L'oggetto viene passato come parametro:

Esempio

Le proprietà create 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>

Prova personalmente

quando si aggiunge in $scope quando si aggiungono attributi all'oggetto, la vista (HTML) può accedere a questi attributi.

Nella vista, non usi $scope Prefisso, puoi riferirti a un nome di attributo, come {{carname}}.

Comprendere l'ambito

Se consideriamo l'applicazione AngularJS composta dai seguenti componenti:

  • La vista, ossia l'HTML.
  • Il modello, ossia i dati disponibili alla vista corrente.
  • Il controller, ossia la funzione JavaScript, utilizzata per creare/modificare/cancellare/gestire i dati.

Quindi l'ambito è il modello.

L'ambito è un oggetto JavaScript con attributi e metodi, che sono disponibili sia per la vista che per il controller.

Esempio

Se hai effettuato una modifica nella vista, il modello e il controller vengono aggiornati:

<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="name">
<h1>Il mio nome è {{name}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.name = "Bill Gates";
});
</script>

Prova personalmente

Comprendere il tuo ambito

È importante comprendere l'ambito che stai gestendo in qualsiasi momento.

Negli esempi precedenti c'è un solo ambito, quindi comprendere il tuo ambito non è un problema, ma per applicazioni più grandi, alcune parti del DOM HTML possono accedere solo a determinati ambiti.

Esempio

Quando si gestisce l'istruzione ng-repeat, ogni iterazione può accedere all'oggetto iterato 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 personalmente

Ogni <li> Gli elementi possono accedere all'oggetto iterato corrente, in questo esempio una stringa, utilizzando x per riferimenti.

un rootScope

Ogni applicazione ha $rootScopeche è contenuta in ng-app Ambito creato sugli elementi HTML delle istruzioni.

Il rootScope è disponibile in tutto l'applicativo.

Se una variabile ha lo stesso nome nell'ambito corrente e nel rootScope, l'applicazione utilizzerà la variabile dell'ambito corrente.

Esempio

L'ambito del controller e il rootScope contengono una variabile chiamata "color":

<body ng-app="myApp">
<p>Il colore preferito di rootScope:</p>
<h1>{{color}}</h1>
<div ng-controller="myCtrl">
  <p>Il scope del colore preferito del controller:</p>
  <h1>{{color}}</h1>
</div>
<p>Il colore preferito del rootScope è ancora:</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 personalmente