Learning AngularJS

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