Why do we need Angular directive's link function

Question

I have searched and read a lot but still confused.

The question is, if i have a directive as below

.directive('someDirective',function(){
    return{
        scope:{},
        bindToController:{
            prop:"="
        },
        templateUrl:'myTemplate.html',
        controller:'directiveController'
    }
})

.controller('directiveController',function(){
    //Do controller stuff
})

Why would i need a link function ? I can pretty much bind the whole DOM to the controller for passing data.(Yes i know that controllers should be used when we want to expose a API function as per the angular docs). Pre angular 1.2 when bindToController did not exist it still made sense.

I have read there is pre and post method, this is where we should be doing stuff such as appending elements etc.But again I'm confused as why would i append stuff when i can just put it in "myTemplate.html".

Can you please give some relevant example where we should be using link and not the controller and what is the difference.

Did you consider that inner directive DOM isn't populated at the moment of controller init and there's nothing to operate on? — Klaster_1 Нет войне, Nov 27 '15 at 07:26
You could refer this http://stackoverflow.com/a/12570008/2435473 or http://stackoverflow.com/questions/15676614/angularjs-link-vs-compile-vs-controller — Pankaj Parkar, Nov 27 '15 at 07:27
Possible duplicate of [Angular directives - when and how to use compile, controller, pre-link and post-link](http://stackoverflow.com/questions/24615103/angular-directives-when-and-how-to-use-compile-controller-pre-link-and-post) — Gaurav_soni, Nov 27 '15 at 09:18

Jay · Answer 1 · 2015-11-27T08:31:19.417

1

Short answer:

The directive's DOM is not rendered when the controller is initialised. If you want to set up listeners ('$watch'), you need the link function, that is executed after DOM rendering.

Long answer: https://docs.angularjs.org/api/ng/service/$compile

edited Nov 27 '15 at 08:31

answered Nov 27 '15 at 07:36

Jay

452
4
15

score 0 · Answer 2 · answered Nov 27 '15 at 09:37

I have not had occasion to use the pre- or post-link functions before but we use the link function all the time in our framework to get hold of a particular instance of a widget and then do something with it.

One widget that we have in our framework is a grid. Inside the grid we've given users the capability of editing the cell contents.

The users of our framework can add an attribute like this to their markup:

<sg-grid editable="true"></sg-grid>

We then look out for this attribute using the attrs parameter in the link function:

angular.module('sg.grid').directive('sgGrid', [

   restrict: 'E', // this is an element directive
   scope: {
      editable: @editable // each grid has its own, isolated scope
   },
   template: '<div class="sg-grid" ng-click="someFunction()"></div>', // we also add behaviour to the widget using events that are added to scope in the link()

   link: function (scope, elm, attrs, ctrls) {

      if (!_.isUndefined(attrs.editable)) { // underscore.js is used to check if it is defined

         if(attrs.editable === 'true' {
            addEditFunctionalityToCell();
         }

         addEditFunctionalityToCell() {
            ...
         }             
      }
      scope.someFunction = function() { ... } // this is bound to ng-click in the template
   }
   ...
]);

the question here is you could have put all this in controller as well and everything would fine.. so why not — Gaurav_soni, Nov 27 '15 at 12:01
Controllers should never be used to manipulate the DOM. See here for a good reason why http://stackoverflow.com/questions/28988547/separating-dom-manipulation-from-angular-controllers-best-practice-wanted — Tone, Nov 30 '15 at 07:18

Why do we need Angular directive's link function

2 Answers2