Le champ d'application est la partie de liaison entre le HTML (vue) et JavaScript (contrôleur).
Le champ d'application est un objet avec les propriétés et les méthodes disponibles.
Le champ d'application est disponible pour la vue et le contrôleur.
Comment faire pour utiliser le champ d'application?
Lorsque vous faites un contrôleur dans AngularJS, vous passez le $scope objet comme argument:
Exemple
Propriétés faites dans le contrôleur, peuvent être mentionné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> Essayez - le vous - même » Lorsque vous ajoutez des propriétés à l' $scope objet dans le contrôleur, la vue (HTML) obtient l' accès à ces propriétés.
Dans la vue, ne pas utiliser le préfixe $scope , vous venez de vous référez à un propertyname, comme {{carname}} .
Comprendre la portée
Si l'on considère une application AngularJS consister en:
- Voir, ce qui est le HTML.
- Modèle, qui sont les données disponibles pour la vue actuelle.
- Controller, qui est la fonction JavaScript qui rend / modifications / supprime / contrôle les données.
Ensuite, le champ d'application est le modèle.
Le champ d'application est un objet JavaScript avec des propriétés et méthodes, qui sont disponibles à la fois la vue et le contrôleur.
Exemple
Si vous apportez des modifications dans la vue, le modèle et le contrôleur sera 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> Essayez - le vous - même » Know Your Scope
Il est important de savoir quelle portée vous faites affaire avec, à tout moment.
Dans les deux exemples ci-dessus, il n'y a qu'un seul champ d'application, afin de connaître votre champ d'application ne sont pas un problème, mais pour les grandes applications, il peut être des sections dans les DOM HTML qui ne peut accéder à certains champs.
Exemple
Lorsque vous traitez avec le ng-repeat directive, chaque répétition a accès à l'objet de répétition en cours:
<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>
Essayez - le vous - même » Chaque <li> élément a accès à l'objet de répétition en cours, dans ce cas , une chaîne, qui est appelée à l'aide de x .
racine Scope
Toutes les applications ont un $rootScope qui est le champ créé sur l'élément HTML qui contient le ng-app directive.
Le rootScope est disponible dans l'ensemble de l'application.
Si une variable a le même nom dans le champ d'application actuel et dans le rootScope, l'application utiliser l'un dans le champ d'application actuel.
Exemple
Une variable appelée «couleur» existe dans le champ d'application à la fois le contrôleur et dans le 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> Essayez - le vous - même »