Detailed explanation of scope in AngularJS_AngularJS-JS Tutorial-php.cn

Detailed explanation of scope in AngularJS_AngularJS

WBOY

Release： 2016-05-16 15:54:32

Original

1175 people have browsed it

A scope is a special JavaScript object that plays the role of the controller to which its view is connected. The scope contains model data. In the controller, model data is accessed through the $scope object.

<script>
   var mainApp = angular.module("mainApp", []);

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

Copy after login

The following are important issues to consider in the example above.

$scope is taken as the first parameter in its constructor to determine the pointer to the controller.
$scope.message and $scope.type are the models they use in HTML pages.
The values of the model we have set will be reflected in the application module’s controller shapeController.
We can define function functions in $scope.

Inheritance scope

Scope is specific to the controller. If we define nested controllers then the child controller will inherit the scope of its parent control.

<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>

Copy after login

The following are important issues to consider in the example above.

We set the value of the model in shapeController.
The child controller circleController message we override. The overridden message will be used when the "message" module of the controller circleController is used.

Example

The following example will demonstrate all the above commands.
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>

Copy after login

Results

Open textAngularJS.html in your web browser. See the results below.

2015617110218233.jpg (560×429)