angularjs transclusion component - When to use transclude 'true' and transclude 'element' in Angular?

1 Answers

When set to true, the directive will delete the original content, but make it available for reinsertion within your template through a directive called ng-transclude.

appModule.directive('directiveName', function() {
    return {
      template: '<div>Hello there <span ng-transclude></span></div>',
      transclude: true

<div directive-name>world</div>

browser render: “Hello there world.”

meaning directive ng-transclude-slot

When should I use transclude: 'true' and when transclude: 'element' ? I cant find anything about transclude: 'element' in the angular docs, they are pretty confusing.

I would be happy if someone could explain this in simple language. What is the benefit of each option? What is the real difference between them?

This is what I have found :

transclude: true

Inside a compile function, you can manipulate the DOM with the help of transclude linking function or you can insert the transcluded DOM into the template using ngTransclude directive on any HTML tag.


transclude: ‘element’

This transcludes the entire element and a transclude linking function is introduced in the compile function. You can not have access to scope here because the scope is not yet created. Compile function creates a link function for the directive which has access to scope and transcludeFn lets you touch the cloned element (which was transcluded) for DOM manipulation or make use of data bound to scope in it. For your information, this is used in ng-repeat and ng-switch.