[angularjs] Understanding the transclude option of directive definition?


2 Answers

I think it is important to mention changes in the above behaviour in new version of AngularJS. I spent one hour trying to achieve above results with Angular 1.2.10.

Contents of the element with ng-transclude are not appended but completely replaced.

So in the above example, what you would achieve with 'transclude' would be:

<div class="something">
    <button>some button</button>
    <a href="#">and a link</a>
</div>

and not

<div class="something"> This is my directive content
    <button>some button</button>
    <a href="#">and a link</a>
</div>

Thanks.

Question

I think this is one of the hardest concept for me to understand with angularjs's directive.

The document from http://docs.angularjs.org/guide/directive says:

transclude - compile the content of the element and make it available to the directive. Typically used with ngTransclude. The advantage of transclusion is that the linking function receives a transclusion function which is pre-bound to the correct scope. In a typical setup the widget creates an isolate scope, but the transclusion is not a child, but a sibling of the isolate scope. This makes it possible for the widget to have private state, and the transclusion to be bound to the parent (pre-isolate) scope.

  • true - transclude the content of the directive.
  • 'element' - transclude the whole element including any directives defined at lower priority.

It says transclude typically used with ngTransclude. But the sample from the doc of ngTransclude doesn't use ngTransclude directive at all.

I'd like some good examples to help me understand this. Why do we need it? What does it solve? How to use it?




From Wiki:

"In computer science, transclusion is the inclusion of part or all of an electronic document into one or more other documents by reference."

I'd like to add another use for transclusion, and that is that it changes the execution order of the compile and link functions of parent and child directives. This can be useful when you want to compile the child DOM before the parent DOM as the parent DOM perhaps depends on the child DOM. This article goes more in depth and clarifies it very well!

http://www.jvandemo.com/the-nitty-gritty-of-compile-and-link-functions-inside-angularjs-directives-part-2-transclusion/




transclude:true mean to add all element that is defined in your directive with template element of your directive.

if transclude:false the these elements are not included in your final html of directive only template of directive is rendered.

transclude:element mean your directive template is not used only element defined in your directive are rendered as html.

when you define your directive then it should be restrict to E and when you add it on page then

<my-directive><elements><my-directive>
<elements> is like <p>gratitude</p>
what i am talking about.



Related