angularjs - Angular $parent 和 $parent.$parent 在使用 ng-repeat 时是同一个 Controller

Question

我想了解为什么使用 ng-repeat在repeat 的item 上有某个controller，那个item 的parent 和那个item 的祖父是同一个controller。我期待祖父成为父 Controller 的父级，而不是同一个 Controller 。

这是澄清这一点的代码

HTML

<div ng-controller="MainController">
  {{name}}
  <div ng-controller="SecondController">
  {{name}}
    <ul>
      <li ng-repeat="item in list" ng-controller="ItemController">
         {{item.name}} {{$parent.name}} {{myDad}} {{myGrandpa}}
      </li>
    </ul>
    <div ng-controller="ThirdController">
         {{name}} {{$parent.name}} {{myDad}} {{myGrandpa}}
    </div>
  </div>
</div>

JS

angular.module('app', []);


angular.module('app')
  .controller('MainController', function($scope) {
  $scope.name = "MainController";
 })
.controller('SecondController', function($scope) {
  $scope.name = "SecondController";
  $scope.list = [
   {'name': 'aaa'}
  ];
})
.controller('ItemController', function($scope) {
  $scope.name = "ItemController";
  $scope.myDad = $scope.$parent.name;
  $scope.myGrandpa = $scope.$parent.$parent.name;
})
.controller('ThirdController', function($scope) {
  $scope.name = "ThirdController";
  $scope.myDad = $scope.$parent.name;
  $scope.myGrandpa = $scope.$parent.$parent.name;
});

这里是 CodePen

Answer 1

在 Angular 中，$scope 继承而不是 Controller 。

ng-controller 创建的每个 Controller 都会创建一个新的 $scope (childScope)，它继承自它所在的 $scope。我想你可能想阅读这篇 answer了解 $scope 究竟是如何继承的(原型(prototype)继承)。

请注意，您不必使用“$parent”来获取父 $scope 的名称，例如，如果您要从 ItemController 中删除 $scope.name 并尝试绑定(bind) {{name}} 您的模板将被编译和链接，在您的示例中 {{name}} 的值将是“SecondController”。

关于 $broadcast，您应该尽量避免使用 $rootScope.$broadcast，因为它会将事件发送到应用程序中的所有 $scope。我不确定您的用例是什么，但是如果您想执行例如在“MainController”中定义的方法，您可以调用它例如

angular.module('app', []);


angular.module('app')
  .controller('MainController', function($scope) {
  $scope.name = "MainController";
  $scope.doSomething = function() {
    console.log("Do it");
  }
 })
.controller('SecondController', function($scope) {
  $scope.name = "SecondController";
  $scope.list = [
   {'name': 'aaa'}
  ];
})
.controller('ItemController', function($scope) {
  $scope.name = "ItemController";
  $scope.myDad = $scope.$parent.name;
  $scope.myGrandpa = $scope.$parent.$parent.name;
  $scope.clickItem = function() {
     console.log("Item clicked");
     $scope.doSomething(); // The method from "MainController" will be executed unless ItemController is isolated 
  }
})
.controller('ThirdController', function($scope) {
  $scope.name = "ThirdController";
  $scope.myDad = $scope.$parent.name;
  $scope.myGrandpa = $scope.$parent.$parent.name;
});