명명 된 transclude 슬롯에서 요소의 내용 만 * 어떻게 * transclude합니까?

Question

나는 transclusion을 사용하고자하는 기본 지시문을 가지고 있습니다.

restrict: "E", 
replace: true, 
transclude: { 
    'toolbar': 'toolbarSlot' 
}, 
scope: { 
    pageTitle: "@" 
}, 
templateUrl: "path/to/my/template.html" 

내 템플릿은 다음과 같습니다 :

<my-custom-page-header-directive page-title="Title"> 
    <toolbar-slot> 
    <button>Button</button> 
    <button>Another button</button> 
    </toolbar-slot> 
</my-custom-page-header-directive> 

: 마지막으로

<header class="page-header"> 
    <h1 class="page-title heading">{{ pageTitle }}</h1> 
    <div class="page-header-toolbar toolbar" ng-transclude="toolbar"> 
    <!-- "toolbar" transcluded content should go here --> 
    </div> 
</header> 

, 나는이 지시어를 사용할 때, 내가이 방법을 사용하고 다음과 같이 관련 옵션이 설정되어

문제는 DOM에서 다음과 같은 것으로 끝나며, 외래어 진 toolbar-slot 요소가 중첩 된 콘텐츠에 혼합되어 있습니다.

,

<header class="page-header"> 
    <h1 class="page-title heading">Title</h1> 
    <div class="page-header-toolbar toolbar"> 
    <toolbar-slot> 
     <button>Button</button> 
     <button>Another button</button> 
    </toolbar-slot> 
    </div> 
</header> 

만 슬롯 소자의을 내용 transclude 행 (ngTransclude를 사용하는) 방법이 있는가?

Answer 1

대답은 으로 보이지 않습니다. 지금은으로 할 방법이 없습니다.

내가 슬롯 트랜스 클루 전에 대체 기능을 추가하는 팬이 아니에요 :

An open issue on the Angular.js repository는 ngTransclude 그런 식으로 사용할 수있는 기능을 구현하는 방법에 대한 의혹이 있다는 것을 보여줍니다. 그것은 보통의 "replace"와 transclude : 엘리먼트로 우리가 가지고있는 것과 같은 문제를 가져올 것이다.

하지만 분명히, 당신은 "can actually do this manually if your really need it"입니다.