Tiered Switching in Angular 1.5

Question

I have a general <item> directive and a <listing> directive with filters and pagination tools for enumerating <item> :

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

The <listing> template looks 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 transition between multiple Angular 1.5 slots to easily customize the footer and header:

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

My problem occurs when I try to customize these elements 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> 

This does not work because <item-content> inserted into <item> , but <header> and <footer> not translated to the appropriate places, and they cannot read the item scope variable. Is there any way to achieve this?

Answer 1

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

Then you have an error in one example and in the list. If you change the provided plunkr {items[0].name} to the expected {data.name} in one example, you will see that the name is no longer displayed. The second task is to fix this common problem.

Answer 2

TL; DR; Working example: https://plnkr.co/edit/1ideOiohle8AEzkDJ333?p=preview

The main problem that you are facing is that when you go to the access area that you have access to, the top-level area belongs. What you want is to reference an item level area outside the directive.

So, instead of using transclusion in the listing directive, I bind the string template as an attribute. I have to use the compilation function to get the original value of the string before angular pulls out the {{}} placeholders, and then I use $interpolate to create the template functions itemHeaderTemplate and itemFooterTemplate , which are then used in the template, for example, ng-bind-html="itemHeaderTemplate({item: item})" . ng-bind-html="itemHeaderTemplate({item: item})"

Note. To use ng-bind-html , you need to enable the ngSanitize module or you will get a security exception.