Maison >interface Web >js tutoriel >Explication détaillée de la portée dans AngularJS_AngularJS

Explication détaillée de la portée dans AngularJS_AngularJS

WBOYoriginal: 2016-05-16 15:54:321232parcourir

Une scope est un objet JavaScript spécial qui joue le rôle du contrôleur auquel sa vue est connectée. La portée contient des données de modèle. Dans le contrôleur, 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 éléments suivants sont des questions importantes à prendre en compte dans l'exemple ci-dessus.

$scope est pris comme premier paramètre dans son constructeur pour déterminer le pointeur vers le contrôleur.
$scope.message et $scope.type sont les modèles qu'ils utilisent dans les pages HTML.
Les valeurs du modèle que nous avons défini seront reflétées dans le contrôleur shapeController du module d'application.
Nous pouvons définir des fonctions de fonction dans $scope.

Portée de l'héritage

La portée est spécifique au contrôleur. Si nous définissons des contrôleurs imbriqués, le contrôleur enfant héritera de la portée de son contrôle 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 éléments suivants sont des questions importantes à prendre en compte dans l'exemple ci-dessus.

Nous définissons la valeur du modèle dans shapeController.
Le message circleController du contrôleur enfant que nous remplaçons. Le message remplacé sera utilisé lorsque le module "message" du contrôleur circleController est utilisé.

Exemple

L'exemple suivant démontrera toutes les commandes ci-dessus.
testAngularJS.html

<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="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/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>

Résultats

Ouvrez textAngularJS.html dans votre navigateur Web. Voir les résultats ci-dessous.

2015617110218233.jpg (560×429)

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée des méthodes de gestion des exceptions dans les connaissances JavaScript_BasicArticle suivant：Explication détaillée des méthodes de gestion des exceptions dans les connaissances JavaScript_Basic

Articles Liés

Voir plus