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:

http://plnkr.co/edit/T2hh9d?p=preview

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:
    
<org-v-card>

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

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

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

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

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

</org-v-card>

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>
</div>

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';
  $scope.company = 'BCA Corp.';
  $scope.phn = '080-22116677';
  $scope.email = 'mlogan@bca.com';
});


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';
          newscope.company = 'BCA Corp.';
          newscope.phn = '080-22116678';
          newscope.email = 'jking@bca.com';
          clonedelem.scope = newscope;
          angular.element(clonedelem[0]).css('font-weight', 'bold')
            .css('color', 'red');
        };

        /**         
        * It shows the top most div        
        */        
        console.log(iele);
        /**         
         * 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         
        */       
        iele.append(transInstance);


      }

    };

  }
]);

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.





15 comments:
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

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

      Delete
    2. Looks like transcludeFn is to be deprecated...

      https://groups.google.com/forum/#!topic/angular/GOs3oSM7LI4

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

      Delete
  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

    ReplyDelete
  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.

    ReplyDelete
  4. This comment has been removed by the author.

    ReplyDelete
  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

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

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

    ReplyDelete
  8. this is the best explanation i have ever read Transclusion of directives in AngularJS

    AngularJS Training in Bangalore
    |
    AngularJS Training in Chennai

    ReplyDelete
  9. Practice Java for making your career towards a sky-high with Infycle Technologies. Infycle Technologies is the best Java training institute in Chennai, providing courses for the Java certification in Chennai in 200% hands-on practical training with professional trainers in the domain. Apart from the training, the placement interviews will be arranged for the students to set their careers without any struggle. Of all that, 100% placement assurance will be given here. To have the best job, call 7502633633 to Infycle Technologies and grab a free demo to know more.
    Best software training in chennai

    ReplyDelete
  10. Infycle Technologies, the best software training institute in Chennai offers the No.1 Python Certification in Chennai for tech professionals. Apart from the Python Course, other courses such as Oracle, Java, Hadoop, Selenium, Android, and iOS Development, Big Data will also be trained with 100% hands-on training. After the completion of training, the students will be sent for placement interviews in the core MNC's. Dial 7502633633 to get more info and a free demo.

    ReplyDelete