在命名的嵌入槽中，如何仅嵌入元素的内容？

Question

我有一个要使用嵌入的基本指令。相关选项设置如下：

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 元素混入了嵌入的内容中：

<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）只嵌入插槽元素的内容？

Answer 1

看起来答案是 不，目前还没有办法做到这一点。

An open issue on the Angular.js repository 表明人们对以这种方式实现使用 ngTransclude 的能力存在疑虑：

I'm not a fan of adding a replace functionality to the slot transclusion. It would introduced the same problems we have with normal "replace" and transclude: element.

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

在命名的嵌入槽中，如何仅嵌入元素的内容？

In a named transclude slot, how do I transclude only the element's contents?

javascript

angularjs

angularjs-directive

angularjs-ng-transclude

在命名的嵌入槽中，如何*仅*嵌入元素的内容？

In a named transclude slot, how do I transclude *only* the element's contents?

javascript

angularjs

angularjs-directive

angularjs-ng-transclude

在命名的嵌入槽中，如何仅嵌入元素的内容？

In a named transclude slot, how do I transclude only the element's contents?