AngularJS 부모 범위의 ng-repeat

컨트롤러에서 부모 구성 요소 인 목록이 정의 된 자식 구성 요소에서 ng-repeat를 사용하려고합니다. 그러나 그것이 작동하는 유일한 방법은 목록이 부모로부터 왔다고 지정하는 경우입니다.AngularJS 부모 범위의 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) { 
 
\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

이 그렇게 할 수있는 올바른 방법이 있나요?

예 나는 그것을

을 피할 수 있습니까?

왜? 난 당신이 래퍼 부모 범위 parentController를 이동할 수 있습니다, 당신은 $parent을 제거 할 경우 어떤 문제가 부모 범위를

를 얻을 수 $parent를 사용하여 표시되지 않습니다 및 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

답변

관련 문제