Sunday, February 9, 2014

Introduction to Transclusion of directives in AngularJS

This is an introduction to the transclusion part of directives in AngularJS. In order to make it more simpler, I have created one directive:

which uses couple of key use cases(mentioned below) of transclusion.

ng-transclude:  Rendering transcluded content. 
transcludeFn:   Constructor Function to modify the transcluded content with or without new scope.

By definition transclusion is the inclusion of document or part of the document into another document by reference.(From Wikipedia)

In case of AngularJS transclusion is used in similar fashion but we have more control on the transcluded content. If you are creating a directive which basically acts as an wrapper for it's child contents, and the content can be anything.Then transclusion should be your approach.

 Consider the below directive:

    <h4>{{firstName}} {{lastName}}</h4>

    <h5>Designation: {{jobtitle}}</h5>

    <h5>Company: {{company}}</h5>

    <h5>Phn no: {{phn}}</h5>

    <h5>Email: {{email}}</h5>


In the above example org-v-card is an user defined directive which acts as wrapper for it's child contents(one h4 and four h5 elements ).

Lets look into the template part  of the org-v-card directive.

<div class="vcard">
    Quick Info:<span ng-transclude></span>

In the above example to access all the child content(In this example one h4 and four h5 elements) and to render  it we are using <span ng-transclude></span>. The directive ng-transclude provided by AngularJS renders the child contents of the parent directive(In this example org-v-card).

Lets look into the controller:

var theApp = angular.module('myApp', []);

theApp.controller('myCtrl', function ($scope) {

  $scope.firstName = "Mike";
  $scope.lastName = "Logan";
  $scope.jobtitle = 'Consultant';
  $ = 'BCA Corp.';
  $scope.phn = '080-22116677';
  $ = '';

theApp.directive('orgVCard', ['$compile',
  function ($compile) {
    return {
      restrict: 'E',
      transclude: true,
      templateUrl: 'vcardtemplate.html',
      replace: true,
      link: function (scope, iele, attr, controller, transcludeFn) {
         * Modify the  transcluded content with a new scope and return the cloned content        

   var modifyTranscludeContent = function (clonedelem, newscope) {

          newscope.firstName = "Jane";
          newscope.lastName = "King";
          newscope.jobtitle = 'Manager';
 = 'BCA Corp.';
          newscope.phn = '080-22116678';
 = '';
          clonedelem.scope = newscope;
          angular.element(clonedelem[0]).css('font-weight', 'bold')
            .css('color', 'red');

        * It shows the top most div        
         * Get the modified transcluded content      
        var transInstance = new transcludeFn(scope.$new(), modifyTranscludeContent;

        iele.append('Reports to:')
         *Render the cloned content compiled with new scope values         




In the above script we are creating following scope variables:
 firstName, lastName, jobtitle, company, phn and email.

In the directive we are giving transclude:true, which means this directive can act as wrapper for it's child elements.

In the link function we are passing transcludeFn as an parameter, this function takes two parameters:

scope.$new: [Optional]A newly generated scope which is applicable only to the transcluded   content not to the directive.
modifyTranscludeContent:  This function(defined in the link function ) as defined above it accepts two parameters , clonedelement and the scope.

clonedelement :   The cloned element of the transcluded  content. Which  also get returned by the transcludeFn.
scope: The scope for the cloned elements.If no values  passed for this then the scope assigned to the directive will be considered as the value.

Inside  modifyTranscludeContent we are assigning different values to properties  of the scope passed to the  function  and assigning that scope to the clonedelement.

Consider the below line:

var transInstance = new transcludeFn(scope.$new(), modifyTranscludeContent);

transInstance is basically the cloned content after assigning the new scope to it. So now all the child content will render values which are assigned inside the transcludeFn.

In  the last line we are appending the cloned contents  to the parent directive.

Write comments
  1. Thanks ! that really helped figuring how transcludeFn works. In my case, I used this to filter out the html from the transcluded content using clonedelem.textContent , and then assign that string to the current scope

    1. Thanks for feedback, I am glad that it helped you to understand.

    2. Looks like transcludeFn is to be deprecated...!topic/angular/GOs3oSM7LI4

    3. Yeah I think it will get removed from compile function.

  2. Angularjs Online Training Angularjs Training Angularjs Training Angularjs Training in Chennai Angularjs Training in Chennai Angularjs Course Angularjs Course Angular 2 Training in Chennai

  3. Hello Viewers,

    Looking for AngularJS Training in Chennai, Here is the solution for you Credo Systemz provides the best AngularJS Certification training in chennai with expert angularjs developers. Ranked No.1 Software Training institute in chennai. Enroll now to enhance your career: Credo Systemz - AngularJS Training in Chennai.

  4. This comment has been removed by the author.

  5. Thanks for sharing the this kind of useful blog.I really apptciate you for share this kind of post it will help lot of person to develope the knowledge.keep sharing more blogs.

    Angularjs Online Training

  6. Hai Author Good Information that i found here,do not stop sharing and Please keep updating us..... Thanks.............Angularjs Development services

  7. It's good to see this blog to learn something. check it once through Angularjs Online Training