English 中文(简体)
AngularJS Tutorial

AngularJS Applications

AngularJS Useful Resources

Selected Reading

AngularJS - Scopes
  • 时间：2024-12-22

AngularJS - Scopes

Previous Page Next Page  

Scope is a special JavaScript object that connects controller with views. Scope contains model data. In controllers, model data is accessed via $scope object.

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

The following important points are considered in above example −

    The $scope is passed as first argument to controller during its constructor definition.

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

    We assign values to models that are reflected in the apppcation module, whose controller is shapeController.

    We can define functions in $scope.

Scope Inheritance

Scope is controller-specific. If we define nested controllers, then the child controller inherits the scope of its parent controller.

<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 important points are considered in above example −

    We assign values to the models in shapeController.

    We override message in child controller named circleController. When message is used within the module of controller named circleController, the overridden message is used.

Example

The following example shows use of all the above mentioned directives.

testAngularJS.htm

<html>
   <head>
      <title>Angular JS Forms</title>
   </head>
   
   <body>
      <h2>AngularJS Sample Apppcation</h2>
      
      <span ng-app = "mainApp" ng-controller = "shapeController">
         <p>{{message}} <br/> {{type}} </p>
         
         <span ng-controller = "circleController">
            <p>{{message}} <br/> {{type}} </p>
         </span>
         
         <span ng-controller = "squareController">
            <p>{{message}} <br/> {{type}} </p>
         </span>
			
      </span>
      <script src = "https://ajax.googleapis.com/ajax/pbs/angularjs/1.3.14/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>

Output

Open the file testAngularJS.htm in a web browser and see the result.