Earlier we looked at custom directives and in this tutorial, we will discuss about the transclusion in directives.
Transclusion means the inclusion of the content of one document in another document by reference (wikipedia).
Transclusion provides a way to pass in templates to a directive and it is displayed. In the previous tutorials, we have used the template property to display the desirable templates.
Let us look at the below example to see what happens if we define a template inside the directive element.
In the following example, we have created a directive called myEmployee that displays a template.
app.js
|
1 2 3 4 5 6 7 8 9 10 |
var app = angular.module('mainApp', []); app.directive('myEmployee', function() { return { restrict: 'EA', scope:{}, //isolate scope. template: "<div>My First Directive.</div>" }; }); |
We have included an element inside the my-employee directive in index.html file.
app.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8"> <title>AngularJS Transclusion</title> </head> <body> <div ng-app="mainApp"> <my-employee> <div>Transcluded Element. This will not be displayed Since the transclude property is not enabled. </div> </my-employee> </div> </div> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> <script type="text/javascript" src="app.js"></script> </body> </html> |
You will see the following output in your browser.
The content inside my-employee directive is not displayed. AngularJS provides tranclude property to support the transclusion in directive. We will see this in the following section using the above example.
Transclusion in Directive Example
AngularJS provides two key features to support transclusion. The first one is a property that is used in directives named transclude and setting this to true enables the transclusion.The second is a directive named ng-transclude that is used to define where external content will be placed in a directive’s template. You can see the use of these two features in the following example.
We have modified the above example to support transclusion simply by adding a transclude property to the myEmployee directive and it is set to true.
app.js
|
1 2 3 4 5 6 7 8 9 10 11 |
var app = angular.module('mainApp', []); app.directive('myEmployee', function() { return { restrict: 'EA', scope:{}, //isolate scope. transclude:true, template: "<div ng-transclude></div><div>My First Directive.</div>" }; }); |
The ng-transclude is a directive that marks the insertion point for the transcluded DOM of the nearest parent directive that uses transclusion. The template we pass in to the directive will replace the element with ng-transclude directive. In this example, we have replaced a div element without any content with meaningful div content.
app.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8"> <title>AngularJS Routing</title> </head> <body> <div ng-app="mainApp"> <my-employee> <div>Transcluded Element. Transclude property is enabled.</div> </my-employee> </div> </div> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> <script type="text/javascript" src="app.js"></script> </body> </html> |
You will see the following output on your browser.
That’s all for now and we will see more AngularJS features in the coming posts.