Mystery of Transclusion – Angular JS

Definition of transclusion – The inclusion of a document or part of a document into another document by reference. example are including styles.css in html page, or server side include which injects HTML fragment in a document.

In angular JS you typically custom fragment through directives and that’s where transclusion is important from angular perspective.

Two key features are provided by AngularJS to support transclusion. The first is a property that is used in directives named transclude. When a directive supports transclusion this property is set to true. The second is a directive named ng-transclude that is used to define where external content will be placed in a directive’s template. The directive code that follows uses these two AngularJS features to enable transclusion.

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

Transclusion-1

var myCustomApp = angular.module('myApp',[]);
myCustomApp.directive('customDirectiveElement', function(){
    return {
        template: 'This is my custom directive element content'
    }
});

This will result in rendering
Transclusion-2

Notice that the content of your original element will be lost (or better said, replaced), button and href are gone

<button>Submit</button>
<a href="#">Home</a>

So, what if you want to keep your button… and href.. in the DOM? You’ll need something called transclusion. The concept is pretty simple: Include the content from one place into another.

So with transclusion the directive should look like this

myCustomApp.directive('customDirectiveElement', function(){
    return{
               restrict: 'E',
               transclusion: true,
               template: 'This is my custom directive element content 
                                         
'
} });

This would render:

Transclusion-3

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

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s