Parsing AngularJS scope and using sample code-JS Tutorial-php.cn

Parsing AngularJS scope and using sample code

怪我咯

Release： 2017-03-30 09:30:19

Original

1203 people have browsed it

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>

Copy after login

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>

Copy after login

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>

Copy after login

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!