angularjs – Angular $parent和$parent.$parent在使用ng-repeat

发布时间：2020-12-17 07:17:08 所属栏目：安全来源：网络整理

导读：我想了解为什么当在重复项目上使用某个控制器的ng-repeat时,该项目的父项和该项目的祖父是同一个控制器.我期待祖父成为父控制器的父母,而不是同一个控制器. 这里的代码澄清了这一点 HTML div ng-controller="MainController" {{name}} div ng-controller="Se

我想了解为什么当在重复项目上使用某个控制器的ng-repeat时,该项目的父项和该项目的祖父是同一个控制器.我期待祖父成为父控制器的父母,而不是同一个控制器.

这里的代码澄清了这一点

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>

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

解决方法

在Angular中,$scope继承而不是控制器.

由ng-controller创建的每个控制器都会创建一个新的$scope(childScope),它继承自它所存在的$scope.我想你可能想要阅读这个answer以了解$scope是如何继承的(原型继承).

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

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

angular.module('app',function($scope) {
  $scope.name = "MainController";
  $scope.doSomething = function() {
    console.log("Do it");
  }
 })
.controller('SecondController',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;
});

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!