Post
Ask Question

Transclusion For Directive In AngularJS

Introduction

Transclusion provides a way to include a part into one or more document by reference. It is very important in "Directive" of AngularJS. It is required in Directive whenever Directive want to replace its original contents with new elements but want to use the original contents somewhere in the new elements.
 
Transclude allows to pass an entire template, including its scope, to a directive. Doing so gives us the opportunity to pass into arbitrary content and arbitrary scope to a directive. Scope option must be Isolated, {}, or set to true. Just go through the link Isolated Scope In AngularJS for more details about the Isolated Scope.
 
In Directive, only use transclude : true when you want to create a directive that wraps arbitrary content. 
 
Basic example of Transclude:
 
.Js file part:
  1. .directive("myDirective", function() {  
  2.   return {  
  3.     transclude: true,  
  4.     template: "<div>the template</div><div ng-transclude></div>"  
  5.   };  
  6. })  
 .html file part:
  1. <div my-directive>  
  2.   This is my Content.  
  3. </div>  
Result in HTML format:
  1. <div my-directive>  
  2.   <div>the template</div>  
  3.   <div ng-transclude>This is my Content.</div>  
  4. </div>   
See the following code showing another example:
 
app.js
  1. var app = angular.module('plunker', []);  
  2. app.directive('mySlideBox', function() {  
  3. return {  
  4. restrict: 'EA',  
  5. scope: {  
  6. title: '@'  
  7. },  
  8.   transclude: true,  
  9.   template: '<div class="sidebox">\  
  10.    <div class="content">\  
  11.     <h3 class="header">{{ title }}</h3>\  
  12.      <span class="content" ng-transclude>\  
  13.      </span>\  
  14.    </div>\  
  15.  </div>'  
  16. }  
  17. });  
index.html
  1. <!doctype html>  
  2. <html ng-app="plunker" >  
  3. <head>  
  4.   <meta charset="utf-8">  
  5.   <title>AngularJS Example</title>  
  6.   <link rel="stylesheet" href="style.css">  
  7.   <script>document.write("<base href=\"" + document.location + "\" />");</script>  
  8.   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>  
  9.   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>  
  10.   <script src="app.js"></script>  
  11. </head>  
  12. <body>  
  13. <div my-slide-box title="Employee Names">  
  14.   <ul>  
  15.     <li>John</li>  
  16.     <li>Kapil</li>  
  17.     <li>waseem</li>  
  18.   </ul>  
  19. </div>  
  20.   
  21. <div my-slide-box title="My Links">  
  22.   <div>  
  23.     <a href="">Yahoo</a>  
  24.     <a href="">AngularJS</a>  
  25.     <a href="">Sports</a>  
  26.     <a href="">BBC</a>  
  27.     <a href="">Startup</a>  
  28.   </div>  
  29.   </div>  
  30. </body>  
  31. </html>  
Output:


Plunker Link : transclude 
 
Above code explains the AngularJS compiler that where it finds the ng-transclude directive is where it should place the content that it has captured inside the DOM element.
 
So, if you can seen carefully in the HTML part that I have reused the Directive with the transclusion to provide a secondary element like "My Links" without the need to worry about the styles and layout.
 
Conclusion
 
So, Transclusion in the Directive of AngularJS provides a way to place a new content or template into an original content. 


Similar Articles