Portée AngularJS (portée)
Scope est le lien entre HTML (vue) et JavaScript (contrôleur).
Scope est un objet avec des méthodes et propriétés disponibles.
Scope peut être appliqué aux vues et aux contrôleurs.
Comment utiliser Scope
Lorsque vous créez un contrôleur dans AngularJS, vous pouvez passer l'objet $scope en paramètre :
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<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>
<p>控制器中创建一个属性名 "carname"，对应了视图中使用 {{ }} 中的名称。</p>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
When in Lorsque l'objet $scope est ajouté au contrôleur, la vue (HTML) peut obtenir ces propriétés. Dans la vue
, vous n'avez pas besoin d'ajouter le préfixe $scope, il vous suffit d'ajouter le nom de l'attribut, tel que : {{carname}} .
Aperçu de la portée
L'application AngularJS se compose des éléments suivants :
View (view), qui est HTML.
Modèle (model), les données disponibles dans la vue actuelle.
Contrôleur, qui est une fonction JavaScript qui peut ajouter ou modifier des propriétés.
la portée est le modèle.
Une portée est un objet JavaScript avec des propriétés et des méthodes qui peuvent être utilisées dans les vues et les contrôleurs.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="name">
<h1>我的名字是 {{name}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Doe";
});
</script>
<p>当你修改输入框中的值时，会影响到模型(model),当然也会影响到控制器对应的属性值。</p>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Portée
Il est très important de comprendre la portée que vous utilisez actuellement.
Dans les deux exemples ci-dessus, il n'y a qu'une seule portée, donc c'est relativement simple à gérer, mais dans les grands projets, il y a plusieurs portées dans le DOM HTML, vous devez alors connaître la portée que vous utilisez Quel est le périmètre correspondant ?
Chaque élément <li> peut accéder à l'objet répété courant, qui correspond à une chaîne et est représenté par la variable x.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<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>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Root Scope
Toutes les applications ont un $rootScope, qui peut être appliqué à tous les éléments HTML contenus dans le ng-app directive.
$rootScope peut être utilisé dans toute l'application. C'est le pont entre les oscilloscopes de chaque contrôleur. Les valeurs définies avec rootscope peuvent être utilisées dans chaque contrôleur.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h1>姓氏为 {{lastname}} 家族成员:</h1>
<ul>
<li ng-repeat="x in names">{{x}} {{lastname}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $rootScope) {
$scope.names = ["Emil", "Tobias", "Linus"];
$rootScope.lastname = "Refsnes";
});
</script>
<p>注意 $rootScope 在循环对象内外都可以访问。</p>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
