What is ng-transclude?

by

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

More Related Contents:

  1. What is the difference between ‘@’ and ‘=’ in directive scope in AngularJS?
  2. How to access parent scope from within a custom directive *with own scope* in AngularJS?
  3. How can I dynamically add a directive in AngularJS?
  4. When writing a directive in AngularJS, how do I decide if I need no new scope, a new child scope, or a new isolated scope?
  5. How to select an element by classname using jqLite?
  6. AngularJS ng-style with a conditional expression
  7. Confused about Angularjs transcluded and isolate scopes & bindings
  8. Rendering directives within $sce.trustAsHtml
  9. How to allow only a number (digits and decimal point) to be typed in an input?
  10. Angular directive how to add an attribute to the element?
  11. get original element from ng-click
  12. How can I test events in angular?
  13. AngularJS : ng-repeat filter when value is greater than
  14. angularjs share data config between controllers
  15. AngularJS Group By Directive without External Dependencies
  16. AngularJS watch DOM change
  17. How do I apply an AngularJS directive based on a class set by ng-class?
  18. $apply vs $digest in directive testing
  19. How to use “ng-repeat” within template of a directive in Angular JS?
  20. When to use the AngularJS `$onInit` Life-Cycle Hook
  21. AngularJS – how to override directive ngClick
  22. Bind class toggle to window scroll event
  23. Angular adds strange options into select element when setting model value
  24. Angular directive name: only lower case letters allowed?
  25. Angular directive for a fallback image
  26. Understanding the transclude option of directive definition?
  27. angularjs text area character counter
  28. ng-click doesn’t work within the template of a directive
  29. creating a new directive with angularjs
  30. AngularJS – Directives vs Controllers

Leave a Comment