AngularJS ng父亲的范围重复

我想在子组件中使用ng-repeat，使用定义的列表是父组件 - 在控制器中。然而，它唯一的工作方式是当我指定该列表来自父代AngularJS ng父亲的范围重复

{$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) { 
 
\t $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>

来源

2017-09-24 HadarZH

这是做正确的方法是什么？

是

我能避免呢？

为什么？我看不出使用$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

来源

2017-09-24 17:01:13

AngularJS ng父亲的范围重复

回答

相关问题