Angular.js 지시문이 ngRepeat로 변환되었습니다 - 오류

Question

차트 지시문을 만들려고합니다 (기존 솔루션에는 관심이 없음). bartemplate의 하위 지시문을 사용하여 각 막대에 대해 정의 가능한 템플릿을 만들고 싶습니다. bartemplate을 반복하고 ng-repeat 및 ng-transclude 템플릿을 사용하여 트릭을 수행 할 것이라고 생각했습니다. 대신 각도로 오류가 발생했습니다.

Error: [ngTransclude:orphan] Illegal use of ngTransclude directive in the template! No parent directive that requires a transclusion found. Element: <div ng-repeat="bar in bars track by $index" ng-transclude="" class="ng-scope">

http://jsfiddle.net/jt4Y2/7/

그래서 당신은 요청할 수 있습니다, 왜 transclude? 차트에 추가하는 요소 (예 : 레이블)를 포함 할 수 있고 <bartemplate>을 간섭하지 않을 수 있기를 원합니다.

Answer 1

코드에 몇 가지 문제가 있습니다. 첫째, 당신은 혼외의 범위 안에서 결론을 내림으로써 혼란을 겪고 있습니다. 둘째로, 이미 ng-repeat와 같은 속임수를 사용하고 그 안에 내재화하려고하는 지시문을 결합하고 있습니다. 단지 작동하지 않습니다. 난 당신이 원하는 것을 그 코드의 단순화 된 버전을 제공하고 있습니다

:

http://jsfiddle.net/jt4Y2/6/

날이 무엇을하고 있는지 설명 해보자. 먼저 barchart 지시어가 있습니다. 나는 단순화의 자유를 취했지만, 단지 몸 전체를 bar-template 지시어 대신에 막대의 템플릿으로 사용했다.

우리가 barchart DIV 내부의 실제 내용을 transclude: true 설정 때문에이 DOM에서 제거하지만, 당신이 $transclude 매개 변수를 통해 컨트롤러에 주입 할 수있는 transclude 기능을 통해 사용할 수 있습니다. 우리는이 기능을 사용하여 컨트롤러에 저장하므로 나중에 액세스 할 수 있습니다.

barchart 지침

다음이 템플릿으로 대체됩니다 : 더 ng-transclude이없는

<div xmlns="http://www.w3.org/2000/svg"> 
    <div ng-repeat="bar in bars track by $index" render-bar></div> 
</div> 

공지있다. 대신 템플릿을 렌더링하기 위해 자체 지시문 render-bar을 만듭니다. 이렇게하면 ng-repeat와의 충돌을 피할 수 있으며 자체적으로 중첩됩니다.

renderBar 지침

은 매우 간단하다 :

directive('renderBar', function(){ 
    return { 
     require: '^barchart', 
     link: function(scope, element, attrs, controller){ 
     controller.renderBarTemplate(scope, function(dom){    
      element.append(dom); 
     }); 
     } 
    } 
}); 

첫째, 우리는 부모 barchart 지시가있을 것을 요구하고 있습니다. link 함수에서 컨트롤러를 가져와 저장 한 transclude 함수 인 renderBarTemplate에 액세스 할 수 있습니다.

우리가 전달하는 첫 번째 매개 변수는 현재 범위 (기본적으로 ng-repeat에서 제공되는 범위 인 을 포함한 반복 변수에 대한 액세스를 제공하는 범위)에 대한 함수 링크를 만드는 범위입니다.

컴파일 된 DOM은 콜백 (두 번째 매개 변수)을 통해 반환되며 에 의해 제공되는 <div>에 첨부 할 수 있습니다.

질문이 있거나 추가 설명이 필요하면 알려주세요.

UPDATE : 여기

당신이 <bartemplate> 지시어를 유지하자 버전 : 그것은 지금에 대한 책임

directive('bartemplate', function(){ 
    return { 
    transclude: true, 
    restrict: 'E', 
    require: '^barchart', 
    link: function(scope, element, attrs, barChartController, transclude){ 
     element.remove(); 
     barChartController.renderBarTemplate=transclude; 
    } 
    }; 
}) 

: 나는 bartemplate 지시문을 추가 http://jsfiddle.net/jt4Y2/10/

자사의 transclude 기능을 가져 와서 저장 부모의 컨트롤러에서. ... 'A': (그래서 나중에 render-bar 지침에서 사용 할 수 있습니다 또한

가 element.remove() 알이 절대적으로 필요하지 않지만 단순히 HTML에서 remaning <bartemplate> 태그를 제거한다