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

これはそれを行うための正しい方法ですか？

はい

私はそれを避けることはできますか？

なぜですか？私はあなたがラッパーに親スコープ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

AngularJS親のスコープでのngリピート

答えて

関連する問題