在一個命名的transclude插槽中，如何transclude * only *元素的內容？

Question

我有一個基本的指令，我想使用transclusion。相關的選項設置如下：

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

我的模板是：

<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> 

最後，當我使用的指令，我用這種方式：

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

問題是，在DOM中，它最終會像這樣，將一個無關的toolbar-slot元素混合到transcluded內容中：

<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> 

有一種方法（使用ngTransclude）僅transclude的內容槽元件的？

Answer 1

看起來像答案是不，現在還沒有辦法做到這一點，現在。

An open issue on the Angular.js repository表明，大約有執行使用ngTransclude這樣的能力心存疑慮：

我不添加替換功能插槽transclusion的粉絲。它會引入與正常「替換」和transclude：元素相同的問題。

但是，顯然，你"can actually do this manually if your really need it"。