Portée d'AngularJS
La portée est la partie contraignante entre le HTML (vue) et le JavaScript (contrôleur).
La portée est un objet avec les propriétés et les méthodes disponibles.
L'étendue est disponible à la fois pour la vue et pour le contrôleur.
Comment utiliser la portée ?
Lorsque vous créez un contrôleur dans AngularJS, vous passez l' $scopeobjet en argument :
Exemple
Les propriétés créées dans le contrôleur peuvent être référencées 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>
Lors de l'ajout de propriétés à l' $scope
objet dans le contrôleur, la vue (HTML) a accès à ces propriétés.
Dans la vue, vous n'utilisez pas le préfixe $scope, vous vous référez simplement à un nom de propriété, comme {{carname}}.
Comprendre la portée
Si nous considérons qu'une application AngularJS consiste en :
- Vue, qui est le HTML.
- Modèle, qui correspond aux données disponibles pour la vue actuelle.
- Controller, qui est la fonction JavaScript qui crée/modifie/supprime/contrôle les données.
Ensuite, la portée est le modèle.
La portée est un objet JavaScript avec des propriétés et des méthodes, qui sont disponibles à la fois pour la vue et le contrôleur.
Exemple
Si vous apportez 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>My name is {{name}}</h1>
</div>
<script>
var app = angular.module('myApp',
[]);
app.controller('myCtrl', function($scope) {
$scope.name
= "John Doe";
});
</script>
Connaissez votre portée
Il est important de savoir à quel périmètre vous avez affaire, à tout moment.
Dans les deux exemples ci-dessus, il n'y a qu'une seule portée, donc connaître votre portée n'est pas un problème, mais pour les applications plus importantes, il peut y avoir des sections dans le DOM HTML qui ne peuvent accéder qu'à certaines portées.
Exemple
Lorsqu'il s'agit de la ng-repeatdirective, chaque répétition a accès à l'objet de répétition 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>
Chaque <li>élément a accès à l'objet de répétition actuel, dans ce cas une chaîne, auquel il est fait référence en utilisant x.
Portée racine
Toutes les applications ont un $rootScopequi est la portée créée sur l'élément HTML qui contient la ng-appdirective.
Le rootScope est disponible dans toute l'application.
Si une variable porte le même nom à la fois dans la portée actuelle et dans la portée racine, l'application utilise celle de la portée actuelle.
Exemple
Une variable nommée "color" existe à la fois dans la portée du contrôleur et dans la 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>