Home > Article > Web Front-end > Parsing AngularJS scope and using sample code

Parsing AngularJS scope and using sample code

怪我咯Original: 2017-03-30 09:30:191132browse

Scope plays its View ConnectionController The role of a special JavaScript object. The scope contains the model data. In the controller, the model data is passed through $scope. Object access.

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

$scope is used as the first parameter in its constructor to determine the pointer. Controller.

$scope.message and $scope.type are the models they are used in the HTML page.

The values of the model we have set will be reflected in the application module's controller shapeController. .

We can define functions in $scope

##Inherit scope##The scope is. Specific controller. If we define nested controllers, then the controller child 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 to consider in the above example. Question.

We set the value of the model in shapeController.

The sub-controller circleController message we override will be used when the module of the controller circleController is used. Message written.

Example

The following example will demonstrate all the above directives.

<html>
<head>
  <title>Angular JS Forms</title>
</head>
<body>
  <h2>AngularJS Sample Application</h2>
  <p ng-app="mainApp" ng-controller="shapeController">
   <p>{{message}} <br/> {{type}} </p>
   <p ng-controller="circleController">
     <p>{{message}} <br/> {{type}} </p>
   </p>
   <p ng-controller="squareController">
     <p>{{message}} <br/> {{type}} </p>
   </p>
  </p>
  <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>

Result

Open textAngularJS.html in the web browser. See the following result.

Parsing AngularJS scope and using sample code

The above is the detailed content of Parsing AngularJS scope and using sample code. For more information, please follow other related articles on the PHP Chinese website!

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：Example code for selecting all and inverting selection in jQuery (recommended)Next article：Example code for selecting all and inverting selection in jQuery (recommended)

See more

Parsing AngularJS scope and using sample code

Related articles