Login/Register
What is ng-transclude?
Asked Answered
Solved angularjsangularjs-directivetransclusion
C

3

285

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?

Countryfied answered 13/7, 2014 at 17:33 Comment(1)
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. – Centri
C
519

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

Cole answered 13/7, 2014 at 17:48 Comment(8)
This is much better description, than their official docs. That one makes my head hurt. – Indigestible
Great answer! :) The link you shared help me to understand the process of transclude. – Magnus
Angular should use this explanation instead of the docs they currently have. – Hellgrammite
one question, why do i see extra <span> element as a container of the stuff in the output markup – Cardialgia
@Cardialgia its angular's compile service, here's the relevant code github.com/angular/angular.js/blob/… – Cole
Short and nice description of Transclude. – Police
Stackoverflow answers are best way to undersatnd angular concepts – Deni
AngularJS explanation hurts because they explain transclude using the word transclude itself in the explanation :) – Lucknow
A
6

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

Appendectomy answered 1/12, 2020 at 4:26 Comment(0)
M
1

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

Marlenmarlena answered 5/10, 2015 at 19:51 Comment(2)
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. – Delanadelancey
@Delanadelancey yea, i come from a ruby background – Carlina

© 2022 - 2024 — McMap. All rights reserved.