Question

我正在尝试在子组件中使用ng-repeat，使用在父控件中定义的列表 - 在控制器中。然而，它唯一的工作方式是当我指定列表来自父

时

{$parent.list}

这是正确的方法吗？我可以避免吗？

var myApp = angular.module('myApp', []);

myApp.component('parent', {
  restrict: 'E',
  controller: 'parentController',
  transclude: true,
  template: '<h1>List</h1><div ng-transclude></div>'
}).controller('parentController', function($scope) {
	$scope.list = ['one','two'];
});

myApp.component('child', {
  restrict: 'E',
  bindings: {
    name: '<',
    list: '<'
  },
  template: '<h3>Child {{$ctrl.name}}</h3>'
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<div ng-app="myApp">
  <parent>
    <child list="list" ng-repeat="name in list" name="name"></child>
    <child list="list" ng-repeat="name in $parent.list" name="name"></child>
  </parent>
</div>

Answer 1

这是正确的方法吗？

是

我可以避免吗？

为什么呢？我没有看到使用$parent获取父范围

的任何问题

如果您要摆脱$parent，可以将父范围parentController移至包装器，ng-repeat="name in list"将起作用

<body ng-controller="parentController as vm">
   <parent >
     <pre>{{list}}</pre>
     <child list="list" ng-repeat="name in list" name="name"></child>
  </parent> 
</body>

所以你的组件不需要控制器：

myApp.component('parent', {
  restrict: 'E',
  //controller: 'parentController',
  transclude: true,
  template: '<h1>List</h1><div ng-transclude></div>'
})

Example Plunker

父级范围内的AngularJS ng-repeat

1 个答案: