What is ng-transclude?

angularjs angularjs-directive transclusion

89,287

Solution 1

Transclude is a setting to tell angular to capture everything that is put inside the directive in the markup and use it somewhere_{(Where actually the ng-transclude is at)} in the directive's template. Read more about this under Creating a Directive that Wraps Other Elements section on documentation of directives.

If you write a custom directive you use ng-transclude in the directive template to mark the point where you want to insert the contents of the element

angular.module('app', [])
  .directive('hero', function () {
    return {
      restrict: 'E',
      transclude: true,
      scope: { name:'@' },
      template: '<div>' +
                  '<div>{{name}}</div><br>' +
                  '<div ng-transclude></div>' +
                '</div>'
    };
  });

If you put this in your markup

<hero name="superman">Stuff inside the custom directive</hero>

It would show up like:

Superman

Stuff inside the custom directive

Full example :

Index.html

<body ng-app="myApp">
  <div class="AAA">
   <hero name="superman">Stuff inside the custom directive</hero>
</div>
</body>

jscript.js

angular.module('myApp', []).directive('hero', function () {
    return {
      restrict: 'E',
      transclude: true,
      scope: { name:'@' },
      template: '<div>' +
                  '<div>{{name}}</div><br>' +
                  '<div ng-transclude></div>' +
                '</div>'
    };
  });

Output markup

Visualize :

Solution 2

For those who come from React world, this is like React's {props.children}.

Solution 3

it's a kind of yield, everything from the element.html() gets rendered there but the directive attributes still visible in the certain scope.

89,287

Code Whisperer

A web developer and Flash technician from Toronto, Ontario

Updated on December 01, 2020

Comments

Code Whisperer over 3 years

I have seen a number of questions on StackOverflow discussing ng-transclude, but none explaining in layman's terms what it is.

The description in the documentation is as follows:

Directive that marks the insertion point for the transcluded DOM of the nearest parent directive that uses transclusion.

This is fairly confusing. Would someone be able to explain in simple terms what ng-transclude is intended to do and where it might be used?
- z.a. almost 10 years
  
  it's basically a marking point for whatever you are inserting for the particular html tag or directive. use it with a directive and you will understand it better.
Capaj about 9 years

This is much better description, than their official docs. That one makes my head hurt.
Paulo Oliveira almost 9 years

Great answer! :) The link you shared help me to understand the process of transclude.
Jeremy W almost 9 years

Angular should use this explanation instead of the docs they currently have.
codeofnode over 8 years

one question, why do i see extra <span> element as a container of the stuff in the output markup
Ben Fischer over 8 years

@codeofnode its angular's compile service, here's the relevant code github.com/angular/angular.js/blob/…
Apie over 8 years

The top answer I reckon is perfect, but if you are coming from a ruby background then I agree, yield seems like a good analogy.
Thakur Rock over 8 years

Short and nice description of Transclude.
Sîrbu Nicolae-Cezar over 8 years

@Apie yea, i come from a ruby background
sridhar.. about 7 years

Stackoverflow answers are best way to undersatnd angular concepts
Ritesh Jagga almost 3 years

AngularJS explanation hurts because they explain transclude using the word transclude itself in the explanation :)