CODEWITHSUNDEEP
angularjsangularjs-directivetransclusion
Code Whisperer
Code Whisperer

Reputation: 23652

What is ng-transclude?

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?

Upvotes: 285

Views: 94361

Answers (3)

gamliela
gamliela

Reputation: 4069

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

Upvotes: 6

Ben Fischer
Ben Fischer

Reputation: 6402

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

enter image description here

Visualize :

enter image description here

Upvotes: 520

S&#238;rbu Nicolae-Cezar
S&#238;rbu Nicolae-Cezar

Reputation: 585

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

Upvotes: 1

Related Questions