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

Detailed explanation of scope in AngularJS_AngularJS

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Release: 2016-05-16 15:54:32
Original
1265 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)

Related labels:
Statement of this Website
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
Latest Issues
angular.js - angularJS ng-style用法
From 1970-01-01 08:00:00
0
0
0
angular.js - AngularJS form validation
From 1970-01-01 08:00:00
0
0
0
angular.js - Learning AngularJS
From 1970-01-01 08:00:00
0
0
0
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template