CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-compileangularjs-templates
Royi Namir
Royi Namir

Reputation: 148524

Angular dynamic templating with compile VS template function?

I already know what is the purpose of each item in : compile vs link(pre/post) vs controller

So let's say I have this simple code :

HTML

  <body ng-controller="mainController">
    {{ message }}
    <div otc-dynamic=""></div>
  </body>

Controller

app.controller("mainController", function($scope) {
  $scope.label = "Please click";
  $scope.doSomething = function() {
    $scope.message = "Clicked!";
  };

});

Directive

app.directive("otcDynamic", function($compile) {

  var template = "<button ng-click='doSomething()'>{{label}}</button>";

  return {

    compile: function(tElement, tAttributes) {
        angular.element(tElement).append(template);
        for (var i = 0; i < 3; i++) {
          angular.element(tElement).append("<br>Repeat " + i + " of {{name}}");
        }

        return function postLink(scope, element, attrs) {
          scope.name = "John";
        }
      }

  }
});

So as we can see , I modify the template (at the compile function - which is where it should be actually)

Result ( plnker):

But

I didn't know that template:... can also take a function.

So I could use the template function instead (plunker) : 

app.directive("otcDynamic", function() {

  var template1 = "<button ng-click='doSomething()'>{{label}}</button>";

  return {
    template: function(element, attr) {
      element.append(template1);
      for (var i = 0; i < 3; i++)
        element.append("<br>Repeat " + i + " of {{name}}");

    },

    link: function(scope, element) {
      scope.name = "John";
    }
  }
});

Question

If so - When should I use the template function vs compile function ?

Upvotes: 4

Views: 953

Answers (1)

Anand G
Anand G

Reputation: 3200

Let me try to explain what I understood so far.

Directives is a mechanism to work with DOM in Angular. It gives you leverage of playing with DOM element and it's attribute. So it also gives you callbacks to make your work easy. template , compile and link are those examples. Since your question is specific with compile and template I would like to add about link as well.

A) Template

Like it state, it is a bunch of HTML tags or files to represent it on DOM directly as the face of your directive. Template can be a file with specific path or inline HTML in code. Like you stated above. template can be wrap in function but the sole use of template is the final set of HTML which will be placed on DOM. Since you have the access to element and its attributes, you can perform as many DOM operation here as well.

B) Compile

Compile is a mechanism in directive which compiles the template HTML or DOM to do certain operation on it and return final set of HTML as template. Like given in Angular DOC

Compiles an HTML string or DOM into a template and produces a template function, which can then be used to link scope and the template together.

Which clearly says that, this is something on top of template. Now like I said above you can achieve similar operations in template as well but when we have methods for its sole purpose, you should use them for the sake of best practice. You can read more here https://docs.angularjs.org/api/ng/service/$compile

C) Link

Link is used to register listeners like $watch, $apply etc to link your template with Angular scope so that it will get binded with module. When you place any directive inside controller, the flow of scope goes through the link that means the scope is directly accessible in link. Scope is sole of angular app and thus it gives you advantage of working with actual model. Link is also useful in dom manipulations and can be used to work with any DOM element using jQlite

So collecting all above in one

1. Template is the primary source of DOM or HTML to directive. it can be a file or inline HTML.

2. Compile is the wrapper to compile HTML into final template. It is used to gather all the HTML element and attribute to create template for directive.

3. Link is the listener wrapper for various scope and watchers. It binds scope of current controller with html of template and also do manipulation around it.

Hope this helps a bit to understand. Thanks

Upvotes: 1

Related Questions