在命名的transclude槽中,如何仅转换*元素的内容?

时间:2016-11-04 16:53:01

标签: javascript angularjs angularjs-directive angularjs-ng-transclude

我有一个基本指令,我想使用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元素:

<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)只能转换插槽元素的内容

1 个答案:

答案 0 :(得分:3)

看起来答案是不,现在还没有办法做到这一点

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

  

我不喜欢为插槽转换添加替换功能。它会引入与普通&#34;替换&#34;相同的问题。并转换:element。

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