Menu

Angular.js directives – Difference between controller and link

Angular directives can be a black hole of thoughts, and one of those being, “where do I put code, in ‘controller’ or ‘link’?”

The short short answer: ‘link’.

The longer short answer: Ask yourself “when do I want my code to run?”

Before compilation? – Controller

After compilation? – Link

What does this mean? While I would never condone putting DOM manipulation in an angular controller, I see it constantly, and its important to know what is actually going on and when functions are run. Example Plunkr: http://plnkr.co/edit/k5fHMU?p=preview

But, but, but, more details please!

Ok, ok, fair enough. Couple of things to note:

controller ‘$scope’ and link ‘scope’ are the same thing. The difference is paramaters sent to the controller get there through Dependency Injection (so calling it ‘$scope’ is required), where parameters sent to link are standard order based funcitons. All of the angular examples will use ‘scope’ when in the context, but I usually call it $scope for sanity reasons: http://plnkr.co/edit/lqcoJj?p=preview

the $scope/scope in this example is simply the one passed in from the parent controller.

‘link’ in directives are actually the ‘post-link’ function (see rendering pipeline below). Since pre-link is rarely used, the ‘link’ option is just a shortcut to setting up a ‘post-link’ function.

So, whats a real world example? Well, when I’m deciding, I go by this:

Hi David, sorry for the late reply, I was out of the country. Unfortunately since you can accomplish most of the same things in either the controller or linking function from a technical perspective, I was trying to show one of the bad things that could happen if you do DOM manipulation from the controller.

From a practical perspective, you should always put your DOM manipulations in link, and business logic in the controller, which is more of the angular convention. Some people will put both of these exclusively in link, which is fine but somewhat violates the separation of concerns principle. Bottom line, putting DOM manipulations and business logic exclusively in link is “safer” than putting them exclusively in the controller.

From the official Angular guide on Directives (https://docs.angularjs.org/guide/directive):
“Best Practice: use controller when you want to expose an API to other directives. Otherwise use link.”
See their example directly below the section “Creating Directives that Communicate”.

Is there any type of naming convention when using another directive’s controller inside a child directive? I see you have “exampleDirectiveCtrl”. This could easily be named ‘ctrl’ or something else I assume. Is there a way to depend on multiple directives? If that’s possible, how would you name the functions params in the link() method? Thank you for the great post!

Thanks!

Many thanks and chipotle burritos to Josh Prodahl for hosting this blog and occasionally lending me his insights on code, life, and staunch opinions. Check out his newest adventure Teamkeep, which offers free team tracking and scheduling for your sports.