ng-transclude를 만드는 방법은 ng-include (범위 측면에서)와 비슷합니까?

Question

콘텐츠를 복사하여 마치 내 <div data-ng-transclude="">이라고 쓰는 파일에 콘텐츠를 복사하여 붙여 넣은 것처럼 작동하도록 콘텐츠를 변환하고 싶습니다. 어떻게해야합니까?

ng-include을 템플릿을 포함하도록 사용할 수 있으며 스크립트 태그를 사용하여 템플릿을 정의 할 수 있음을 알고 있습니다. 그러나 이것은 템플릿 캐시를 혼란시키고 템플릿 네임 스페이스를 오염시킵니다.

은 내가 하나 가질 수 있도록이 작업을 수행 할 수 내가 내 항목을 표시 할 방법을 정의하는 파일,

<!-- list directive to show the items --> 
<div data-item-list="" data-values="vm.items"> 

    <!-- content to include to display list items --> 
    <div class="form-relation-picker-value" ng-bind="item.value.title"></div> 
    <div class="form-relation-picker-subtitle" ng-bind="item.value.subTitle"></div> 
</div> 

하나의 파일 (또는 그 이상! 그게 요점이다)는에 목록의 구조가 작동하는 방식을 정의합니다. 내가 말했듯이, 그것은 클러, 그래서 같은리스트 구조와

<div data-item-list="" data-values="vm.items" data-template-to-use="randomhash"> 
    <script type="text/ng-template" id="randomhash"> 
     <div class="form-relation-picker-value" ng-bind="item.value.title"></div> 
     <div class="form-relation-picker-subtitle" ng-bind="item.value.subTitle"></div> 
    </script> 
</div> 

...

<div class="list-container"> 
    <div class="list-item" 
     data-ng-click="vm.select(item)" 
     data-ng-repeat="item in vm.items | orderBy : vm.orderBy" 
     data-selected="{{vm.isSelected(item)}}"> 

     <div class="flex"> 
      <div data-ng-include="vm.templateToUse"></div> 
      <div class="grid-col flex-icon form-relation-picker-chrome-height-fix"> 
       <div data-ng-show="vm.isSelected(item)" class="icon check"></div> 
      </div> 
     </div> 
    </div> 
</div> 

을하지만 :

이

<div class="list-container"> 
    <div class="list-item" 
     data-ng-click="vm.select(item)" 
     data-ng-repeat="item in vm.items | orderBy : vm.orderBy" 
     data-selected="{{vm.isSelected(item)}}"> 

     <div class="flex"> 
      <div ng-transclude=""></div><!-- item display via transclude --> 
      <div class="grid-col flex-icon form-relation-picker-chrome-height-fix"> 
       <div data-ng-show="vm.isSelected(item)" class="icon check"></div> 
      </div> 
     </div> 
    </div> 
</div> 

---

내가 같은 것을 할 경우 작동 템플릿 캐쉬.

콘텐츠를 transclude하면 transcluded 콘텐츠가 <div data-item-list=""이 포함 된 지시어의 범위로 평가되므로 작업을 중단합니다. 즉, "item"이 존재하지 않습니다.

transcluded 콘텐츠가 transcluded 콘텐츠를 포함하는 지시어의 범위로 평가되도록하려면 어떻게해야합니까?

Answer 1

템플릿 요소 (Angular가 컴파일하기 전에 HTML에 나타나는 요소)의 내용을 추출하여 지시문의 템플릿에 포함시키는 템플릿 함수입니다.

the docs에서 설명한 것처럼 DDO의 template 속성은 함수 일 수 있습니다.이 경우 함수는 템플릿 요소를 인수로 받고 (다른 것들 중에서) 지시문의 템플릿을 문자열로 반환해야합니다.

는이 같은 것을 사용할 수 있습니다

다음

.directive('itemList', function itemListDirective() { 
    // DDO 
    return { 
    ... 
    template: function itemListTmplFn(tElem) { 
     var customContent = tElem.html(); 

     return '...' + customContent + '...'; 
    } 
    }; 
}) 

이 (V1.5에 도입)을 .component() API를 사용하는 simple demo이다. 평범한 구형 인 .directive()을 사용하려면 약간의 차이가 있지만 쉽게 적용 할 수 있어야합니다.