Question

我已在此地址的plunker上创建了一个测试：Full example on plunker

以下是可以工作的子控制器：

  child.directive('child', function(){
    return{
      restrict:'E',
      templateUrl: 'child.html',
      link: function(){},
      controller:['$scope', function($scope){
        this.inherited = $scope.test;
        this.local = "child";
      }],
      controllerAs:'child'
    };
  });

我期望位于child.js中的控制器是script.js中控制器的子控制器。这意味着如果我想从子控制器访问添加到父控制器范围的变量，我需要使用$ scope。$ parent访问它。有人可以解释为什么这些是相同的范围？

Answer 1

子范围继承自父范围，因此您在父范围中定义的任何内容都将显示在子范围中。请记住，这是一个新的范围，因此修改不会直接影响父级而不使用$scope.$parent范围。看看这个问题和接受的答案：AngularJS access parent scope from child controller

Answer 2

在指令中，默认情况下会继承父作用域：

https://github.com/angular/angular.js/wiki/Understanding-Scopes

Answer 3

默认情况下，指令不会创建新范围。因此，在您的示例中，指令中的$ scope将与包含控制器的范围具有相同的值。范围不是继承的 - 它们是相同的范围。

所以对于这个标记：

<div ng-controller="SomeController">
    <child></child>
</div>

SomeController中的

范围将与指令中的范围完全相同。如果你在指令中使用$ scope。$ parent，你实际上将访问SomeController的父范围。这相当于

scope: false //default for directives

如果你添加：

scope: true

到你的指令定义，然后该指令将创建一个原型继承自父作用域的新作用域。在这种情况下，

<div ng-controller="SomeController">
    <child></child>
</div>

现在$ scope。指令中的$ parent将是SomeController的$ scope。此外，由于它原型继承，该指令将可以访问$ scope。$ parent上定义的方法和属性，以及javascript中原型继承所带来的警告和复杂性。

如果您使用：

scope: {}

现在$ scope。指令中的$ parent仍然是SomeController的$ scope，但新范围不会从父类继承原型，因此您将无法访问$ scope上定义的方法和属性。$ parent

Angular，为什么子控制器与父级具有相同的范围？

3 个答案: