English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Tutoriel de base AngularJS

Scope (Portée) d'AngularJS

La portée est un objet JavaScript spécial utilisé pour connecter le contrôleur au vue. La portée contient des données de modèle. Dans le contrôleur, les données de modèle sont accédées via l'objet $scope.

<script>
　　　var mainApp = angular.module("mainApp", []);
　　　
　　　mainApp.controller("shapeController", function($scope) {
　　　　　　$scope.message = "Dans le contrôleur de forme";
　　　　　　$scope.type = "Shape";
　　　});
</script>

Les points suivants ont été pris en compte dans l'exemple précédent-

  • $scope est passé en tant que premier paramètre à la définition du constructeur du contrôleur.

  • $scope.message et $scope.type sont des modèles utilisés dans la page HTML.

  • Nous assignons des valeurs au modèle reflété dans le module de l'application, dont le contrôleur est shapeController.

  • Nous pouvons définir des fonctions dans $scope.

Héritage de la portée

La portée (portée) est spécifique au contrôleur. Si nous définissons des contrôleurs imbriqués, les sous-controlleurs hériteront de la portée du contrôleur parent.

<script>
　　　var mainApp = angular.module("mainApp", []);
　　　
　　　mainApp.controller("shapeController", function($scope) {
　　　　　　$scope.message = "Dans le contrôleur de forme";
　　　　　　$scope.type = "Shape";
　　　});
　　　mainApp.controller("circleController", function($scope) {
　　　　　　$scope.message = "Dans le contrôleur de cercle";
　　　});
</script>

Les points suivants ont été pris en compte dans l'exemple précédent-

  • nous assignons des valeurs au modèle dans

  • nous assignons des valeurs au modèle danscircleControllerle sous-controlleur couvre le message. Lorsque dans le sous-controlleur nommécircleControllerdans le module contrôleurlorsque le message est，le message couvert sera utilisé.

Exemple en ligne

Les exemples suivants montrent l'utilisation de toutes les instructions mentionnées précédemment.

testAngularJS.htm

<html>
　　　<head>
　　　　　　<title>Angular JS Forms</title>
　　　</head>
　　　
　　　<body>
　　　　　　<h2> AngularJS Scope (portée) </h2>
　　　　　　
　　　　　　<div ng-app = "mainApp" ng-controller = "shapeController">
　　　　　　　　　<p>{{message}} <br/> {{type}} </p>
　　　　　　　　　
　　　　　　　　　<div ng-controller = "circleController">
　　　　　　　　　　　　<p>{{message}} <br/> {{type}} </p>
　　　　　　　　　</div>
　　　　　　　　　
　　　　　　　　　<div ng-controller = "squareController">
　　　　　　　　　　　　<p>{{message}} <br/> {{type}} </p>
　　　　　　　　　</div>
　　　　　　</div>
　　　　　　<script src = "https://cdn.staticfile.org/angular.js/1.3.14/angular.min.js">
　　　　　　</script>
　　　　　　
　　　　　　<script>
　　　　　　　　　var mainApp = angular.module("mainApp", []);
　　　　　　　　　
　　　　　　　　　mainApp.controller("shapeController", function($scope) {
　　　　　　　　　　　　$scope.message = "Contrôleur de forme";
　　　　　　　　　　　　$scope.type = "Shape";
　　　　　　　　　});
　　　　　　　　　mainApp.controller("circleController", function($scope) {
　　　　　　　　　　　　$scope.message = "Contrôleur circulaire";
　　　　　　　　　});
　　　　　　　　　mainApp.controller("squareController", function($scope) {
　　　　　　　　　　　　$scope.message = "Contrôleur carré";
　　　　　　　　　　　　$scope.type = "Square";
　　　　　　　　　});
　　　　　　</script>
　　　　　　
　　　</body>
</html>
Testez et voyez‹/›

Résultat de la sortie

Ouvrez le fichier dans un navigateur webtestAngularJS.htmet vérifiez les résultats.

Services d'AngularJS Vues d'AngularJS