Understanding the transclude option of directive definition?

by

Consider a directive called myDirective in an element, and that element is enclosing some other content, let’s say:

<div my-directive>
    <button>some button</button>
    <a href="#">and a link</a>
</div>

If myDirective is using a template, you’ll see that the content of <div my-directive> will be replaced by your directive template. So having:

app.directive('myDirective', function(){
    return{
        template: '<div class="something"> This is my directive content</div>'
    }
});

will result in this render:

<div class="something"> This is my directive content</div>

Notice that the content of your original element <div my-directive> will be lost (or better said, replaced). So, say good-bye to these buddies:

<button>some button</button>
<a href="#">and a link</a>

So, what if you want to keep your <button>... and <a href>... in the DOM? You’ll need something called transclusion. The concept is pretty simple: Include the content from one place into another. So now your directive will look something like this:

app.directive('myDirective', function(){
    return{
        transclude: true,
        template: '<div class="something"> This is my directive content</div> <ng-transclude></ng-transclude>'
    }
});

This would render:

<div class="something"> This is my directive content
    <button>some button</button>
    <a href="#">and a link</a>
</div>.

In conclusion, you basically use transclude when you want to preserve the contents of an element when you’re using a directive.

My code example is here.
You could also benefit from watching this.

More Related Contents:

  1. How to set focus on input field?
  2. angular ng-bind-html and directive within it
  3. How to call a method defined in an AngularJS directive?
  4. How to use a keypress event in AngularJS?
  5. Angular directives – when and how to use compile, controller, pre-link and post-link [closed]
  6. Angular.js directive dynamic templateURL
  7. Angularjs dynamic ng-pattern validation
  8. What is the difference between ng-app and data-ng-app?
  9. Easiest way to pass an AngularJS scope variable from directive to controller?
  10. Using angularjs filter in input element
  11. if a ngSrc path resolves to a 404, is there a way to fallback to a default?
  12. Directive isolate scope with ng-repeat scope in AngularJS
  13. calling method of parent controller from a directive in AngularJS
  14. Enable angular-ui tooltip on custom events
  15. Accessing attributes from an AngularJS directive
  16. Custom form validation directive to compare two fields
  17. How to modify scope from within a directive in AngularJs
  18. Binding variables from Service/Factory to Controllers
  19. Call a method of a controller from another controller using ‘scope’ in AngularJS
  20. AngularJS custom form component / directive using ng-model
  21. How can you limit the value from input using AngularJS?
  22. How to set the dynamic controller for directives?
  23. Can you change templateUrl on the fly?
  24. Enable/Disable Anchor Tags using AngularJS
  25. What is `priority` of ng-repeat directive can you change it?
  26. Illegal use of ngTransclude directive in the template
  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