Question

我正在浏览angularjs.org网站上的ng-controller教程。我在http://jsfiddle.net/api/post/library/pure/中遇到了范围继承示例。这里作者说ng-controller指令创建了一个新的子范围，即在范围继承示例中，我们有3个控制器和4个范围。怎么会发生这种情况？来自小提琴的代码如下：

使用Javascript：

var myApp = angular.module('scopeInheritance', []);
myApp.controller('MainCtrl', ['$scope', function($scope){
  $scope.timeOfDay = 'morning';
  $scope.name = 'Nikki';
}]);
myApp.controller('ChildCtrl', ['$scope', function($scope){
  $scope.name = 'Mattie';
}]);
myApp.controller('GrandChildCtrl', ['$scope', function($scope){

  $scope.name = 'Gingerbreak Baby';
}]);

小提琴链接存在一些问题，因此请附上下面的其余代码：

HTML：

<div ng-app="scopeInheritance">
  <div ng-app="scopeInheritance" class="spicy">
    <div ng-controller="MainCtrl">
      <p>Good {{timeOfDay}}, {{name}}!</p>

      <div ng-controller="ChildCtrl">
        <p>Good {{timeOfDay}}, {{name}}!</p>

        <div ng-controller="GrandChildCtrl">
          <p>Good {{timeOfDay}}, {{name}}!</p>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

如果没有看到确切的标记，很难说，如果每个控制器使用一次，那么你将有3个范围+根范围。

当Angular遇到将自己定义为需要范围的指令（内置或其他）时，会创建一个新范围。这是在指令的scope属性中完成的，您可以找到有关in the directive docs的文档。

ng-controller是一个内置的Angular指令，需要一个新的继承范围。因此，当Angular编译DOM树时，它将为每个控制器创建范围。因此，这占了4个范围中的3个。

还有一个特殊范围，ng-app指令定义为$rootScope。 $rootScope是页面上的顶级父作用域。因此，这是第四个范围。

希望这有帮助。

ng-controller指令如何创建新的子范围？

1 个答案: