5

I've got a basic directive that I want to use transclusion. The relevant options are set up as follows:

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

My template is:

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

And finally, when I use the directive, I'm using it this way:

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

The problem is, in the DOM it ends up as something like this, with an extraneous toolbar-slot element mixed into the transcluded content:

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

Is there a way (using ngTransclude) to only transclude the contents of the slot element?

George Kagan
  • 5,913
  • 8
  • 46
  • 50
Nate Green
  • 135
  • 13

1 Answers1

5

Looks like the answer is no, there isn't a way to do that as of right now.

An open issue on the Angular.js repository shows that there are misgivings about implementing the ability to use ngTransclude that way:

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.

But, apparently, you "can actually do this manually if your really need it".

Nate Green
  • 135
  • 13