Search code examples
angularjstransclusion

Angular Transclusion

See this plnkr

https://plnkr.co/edit/theggRtJlbFj1H4zVUKU?p=preview

using the $compile service, I need to have dirC nested inside dirB. The output should be 

DirB
DirC

I thought this was bug since dirC directive and controller was never fired, so the Angular group said to use transclusion.

Ok, so I use transclusion and dirC and dirB is never added to the DOM.

What am I missing?

Solution

  • The directive C is included inside the directive B. But the only visible text in both templates is inside the div which has the directive ng-transclude. So the textual content is replaced by the transcluded HTML: the directive C in the case if <dir-b>, and nothing in the case of <dir-c>.

    Here's your example with fixed templates to show you that it works fine: https://plnkr.co/edit/FRtMA3h0Caredc4staW8?p=preview

    Like ng-view, ng-transclude is a placeholder which means: replace the content of this element by the one inside the body of the directive.