Multilevel transclusion in Angular 1.5

Question

I have a generic <item> directive, and a <listing> directive with filters and pagination tools for listing that <item>:

Example: https://plnkr.co/edit/r6byzhFX5m674ONhH1JS?p=preview

The <listing> template is something like this:

<div ng-repeat="item in items">
  <item date="item">
        <ng-transclude ng-transclude-slot="itemContent"></ng-transclude>
  </item>
</div>

The <item> directive uses the new Angular 1.5 multi-slot transclusion to customize footer and header easily:

<item data="itemData">
  <header>My header</header>
  <footer>My custom footer</footer>
</item>

My problem arises when I try to customize that items when using <listing>. If I use something like this:

<listing items="myItems">
  <item-content>
        <header>{{ item.name }}</header>
        <footer>My custom footer for {{ item.name }}</footer>
  </item-content>
</listing>

It doesn't work, because the <item-content> gets inserted into <item>, but <header> and <footer> don't get transcluded into their proper places, and they cannot read the item scope variable. Is there any way to achieve this?

Answer 1

First, in the listing template you should change ng-transclude-slot="itemHeader" by ng-transclude="itemHeader" and ng-transclude-slot="itemFooter" by ng-transclude="itemFooter" to get the transclusion to work.

Then, you have in single and list example a mistake. If you change in the provided plunkr {items[0].name} by the expected {data.name} in the single example you will see that the name is not being displayed anymore. The second thing to do is to fix this shared problem.