AngularJS - 范围

作用域是一个特殊的 JavaScript 对象，它将控制器与视图连接起来。范围包含模型数据。在控制器中，模型数据是通过 $scope 对象访问的。

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

上面的例子考虑了以下要点 -

$scope 在构造函数定义期间作为第一个参数传递给控制器。
$scope.message 和 $scope.type 是 HTML 页面中使用的模型。
我们为应用程序模块中反映的模型分配值，该模块的控制器是 shapeController。
我们可以在 $scope 中定义函数。

范围继承

范围是特定于控制器的。如果我们定义嵌套控制器，则子控制器将继承其父控制器的范围。

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

上面的例子考虑了以下要点 -

我们为 shapeController 中的模型赋值。
我们覆盖名为CircleController的子控制器中的消息。当在名为CircleController的控制器的模块中使用消息时，将使用覆盖的消息。

例子

以下示例显示了上述所有指令的使用。

testAngularJS.htm

现场演示

<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 = "https://ajax.googleapis.com/ajax/libs/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>

输出

在 Web 浏览器中打开文件testAngularJS.htm并查看结果。