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

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

WBOY

Libérer： 2016-05-16 15:54:32

original

1211 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

Résultats

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

2015617110218233.jpg (560×429)