Domaines AngularJS

Le scope (scope) est la partie de liaison entre HTML (vue) et JavaScript (contrôleur).

Le scope est un objet avec des propriétés et des méthodes disponibles.

Le scope est disponible pour la vue et le contrôleur.

Comment utiliser le scope ?

Lorsque vous créez un contrôleur en AngularJS, vous allez $scope Un objet est passé en tant que paramètre :

Instance

Les attributs créés dans le contrôleur peuvent être appelés dans la vue :

<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>

Essayer par vous-même

Lorsque vous ajoutez $scope lorsque vous ajoutez des propriétés à un objet, la vue (HTML) peut accéder à ces propriétés.

Dans la vue, vous n'utilisez pas $scope Préfixe, vous n'avez besoin de référer qu'à un nom de propriété, par exemple {{carname}}.

Comprendre le domaine

Si nous considérons une application AngularJS comme composée des éléments suivants :

  • La vue, le HTML.
  • Le modèle, les données disponibles pour la vue actuelle.
  • Le contrôleur, une fonction JavaScript, est utilisée pour créer / modifier / supprimer / contrôler les données.

Alors le domaine est le modèle.

Un domaine est un objet JavaScript ayant des propriétés et des méthodes, ces propriétés et méthodes sont accessibles à la vue et au contrôleur.

Instance

Si vous effectuez des modifications dans la vue, le modèle et le contrôleur seront mis à jour :

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

Essayer par vous-même

Comprendre votre domaine

Il est important de comprendre le domaine que vous traitez à tout moment.

Dans les deux exemples ci-dessus, il n'y a qu'un seul domaine, donc comprendre votre domaine n'est pas un problème, mais pour des applications plus grandes, certaines parties du DOM HTML ne peuvent accéder qu'à certains domaines.

Instance

Lorsque vous traitez l'instruction ng-repeat, chaque répétition peut accéder à l'objet répété courant :

<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>

Essayer par vous-même

Chaque <li> Les éléments peuvent accéder à l'objet répété courant, dans cet exemple une chaîne, en utilisant x pour les référer.

un domaine racine

Toutes les applications ont $rootScope， il s'agit de celui qui contient ng-app Le domaine créé sur l'élément HTML de l'instruction.

Le rootScope est disponible dans tout l'application.

Si une variable a le même nom dans le domaine courant et dans le rootScope (rootScope), l'application utilisera la variable du domaine courant.

Instance

L'ensemble du domaine du contrôleur et du rootScope contient une variable nommée "color":

<body ng-app="myApp">
<p>La couleur favorite du rootScope:</p>
<h1>{{color}}</h1>
<div ng-controller="myCtrl">
  <p>Le domaine de la couleur préférée du contrôleur :</p>
  <h1>{{color}}</h1>
</div>
<p>La couleur préférée du rootScope reste :</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>

Essayer par vous-même