지시문 템플릿에서 ngRepeat 사용

Question

참조 할 내용은 plnkr입니다.

angular.module('app', function(){ 
}) 
.run(function($rootScope){ 
    $rootScope.values = [1,2,3,4]; 
}) 
.directive('outer', function(){ 
    return { 
    restrict:'E', 
    scope:{ 
     items: '&' 
    }, 
    replace: true, 
    template:'<div><inner items="items()"></inner></div>', 
    compile: function(){ 
     return function(){ 
     }; 
    } 
    }; 
}) 
.directive('inner', function(){ 
    return { 
    restrict:'E', 
    scope:{ 
     items: '&' 
    }, 
    replace: true, 
    template:'<div ng-repeat="item in items()">{{item}}</div>', 
    compile: function(){ 
     return function(){ 
     }; 
    } 
    }; 
}); 

이것은 분명히 고의적 인 예이지만 문제를 강조 표시합니다. 몇 가지 레벨로 깊숙이 묻혀있는 지시문에 반복이 있습니다. 바깥 쪽 범위에서 컬렉션을 전달할 수 있습니다. 그러면 컬렉션이 정상적으로 반복됩니다. 그러나, 내가 실제로하고 싶은 것은 외부 지시자에게 컬렉션 대신에 외부 범위에 대해 실행할 수있는 ng-repeat 식 (item.ID로 값 추적 항목)을 전달하는 기능을 제공하는 것입니다. .

내부 지시어가 ng-repeat에 내장 된 로직을 활용하여 컬렉션이 변경 될 때 렌더링을 최적화 할 수 있기를 바랍니다.

내가 조사한 한 가지 옵션은 표현식으로 변수, 컬렉션 및 트랙을 직접 설정하는 ng-repeat의 새 버전을 만드는 것이지만 기존 구현을 활용하는 것이 분명합니다. 다른 옵션은 모든 인스턴스에 대해 $ compile을 사용합니다. 둘 다 가능하지만 좀 더 우아한 방법이 있기를 바라고 있습니다.

Answer 1

나는 함수를 처리하는 속성 값으로 식을 기반으로 지시문 템플릿을 빌드하는 것이 가장 좋은 방법이라고 생각합니다. 외부 지시어 HERE에 표현식을 속성으로 전달할 수있는 작업 버전이 있습니다.

외부 지시어는 명확하고 이해하기 쉽습니다. 그래서 지시어와

Test Directive passing expression 
<outer outervalues="values" expression="(k,v) in outervalues"></outer> 

<br> 
Filter passed in expression to inner scope 
<outer outervalues="values" expression="(k,v) in outervalues | filter:'bob'"></outer> 

<br> 
Filter on outer scope 
<div ng-init="morevalues = (values | filter:'bob')"></div> 
<div ng-repeat="(k,v) in morevalues"> 
    <input ng-model="v.name"> 
</div> 

<br> 
Directive from filtered outer scope 
<outer outervalues="morevalues" expression="(k,v) in outervalues"></outer> 

: 도움이

.directive('outer', function(){ 
    return { 
    restrict:'E', 
    scope:{ 
     outervalues: '=outervalues' 
    }, 
    replace: true, 
    template: function (elem, attr) { 
       return '<div><inner outervalues="outervalues" nestedex="' + attr.expression + '"></inner></div>'; 
      }, 
    compile: function(){ 
     return function(){ 
     }; 
    } 
    }; 
}) 
.directive('inner', function(){ 
    return { 
    restrict:'E', 
    scope:{ 
     outervalues: '=outervalues' 
    }, 
    replace: true, 
    template: function (elem, attr) { 
       return '<div ng-repeat="' + attr.nestedex + '"><input ng-model="v.name"></div>'; 
      }, 
    compile: function(){ 
     return function(){ 
     }; 
    } 
    }; 
}); 

희망.