AngularJS - Scopes

Scope est un objet JavaScript spécial qui relie le contrôleur aux vues. La portée contient des données de modèle. Dans les contrôleurs, les données du modèle sont accessibles via l'objet $ scope.

<script>
   var mainApp = angular.module("mainApp", []);
   
   mainApp.controller("shapeController", function($scope) {
      $scope.message = "In shape controller";
      $scope.type = "Shape";
   });
</script>

Les points importants suivants sont considérés dans l'exemple ci-dessus -

  • Le $ scope est passé comme premier argument au contrôleur lors de sa définition du constructeur.

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

  • Nous attribuons des valeurs aux modèles qui sont reflétés dans le module d'application, dont le contrôleur est shapeController.

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

Héritage d'étendue

La portée est spécifique au contrôleur. Si nous définissons des contrôleurs imbriqués, le contrôleur enfant hérite de la portée de son contrôleur parent.

<script>
   var mainApp = angular.module("mainApp", []);
   
   mainApp.controller("shapeController", function($scope) {
      $scope.message = "In shape controller";
      $scope.type = "Shape";
   });
   mainApp.controller("circleController", function($scope) {
      $scope.message = "In circle controller";
   });
	
</script>

Les points importants suivants sont considérés dans l'exemple ci-dessus -

  • Nous attribuons des valeurs aux modèles dans shapeController.

  • Nous remplaçons le message dans le contrôleur enfant nommé circleController . Lorsque le message est utilisé dans le module du contrôleur nommé circleController , le message remplacé est utilisé.

Exemple

L'exemple suivant montre l'utilisation de toutes les directives mentionnées ci-dessus.

testAngularJS.htm

<html>
   <head>
      <title>Angular JS Forms</title>
   </head>
   
   <body>
      <h2>AngularJS Sample Application</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://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
      </script>
      
      <script>
         var mainApp = angular.module("mainApp", []);
         
         mainApp.controller("shapeController", function($scope) {
            $scope.message = "In shape controller";
            $scope.type = "Shape";
         });
         mainApp.controller("circleController", function($scope) {
            $scope.message = "In circle controller";
         });
         mainApp.controller("squareController", function($scope) {
            $scope.message = "In square controller";
            $scope.type = "Square";
         });
			
      </script>
      
   </body>
</html>

Production

Ouvrez le fichier testAngularJS.htm dans un navigateur Web et voyez le résultat.