Understanding the transclude option of directive definition?

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?

6 Answers
6

Leave a Comment