Testing Custom Directives That Use Transclusion

There are some additional things you need to know if you are testing custom AngularJS directives that include transclusion. Directives that use transclusion are treated specially by the compiler in that the contents of the directive’s elements are removed and provided via a transclusion function before their compile function is called. Only then will the directive’s template be appended to the directive’s element. At that point it can then insert the transcluded content.

I know that’s a lot to grasp, so here is how the process works when transclude: true is used. This is the element before compilation:

<div translude-directive>  "transcluded content"</div>

Here is what the element looks like after ...

Get Learning AngularJS now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.