Home >Web Front-end >JS Tutorial >Detailed explanation of scope in AngularJS_AngularJS

Detailed explanation of scope in AngularJS_AngularJS

WBOYOriginal: 2016-05-16 15:54:321235browse

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>

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>

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>

Results

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

2015617110218233.jpg (560×429)

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of exception handling methods in JavaScript_Basic knowledgeNext article：Detailed explanation of exception handling methods in JavaScript_Basic knowledge

See more

Detailed explanation of scope in AngularJS_AngularJS

Related articles