Organizational Research By

Surprising Reserch Topic

Angular directives - when and how to use compile, controller, pre-link and post-link

When writing an Angular directive, one can use any of the following functions to manipulate the DOM behaviour, contents and look of the element on which the directive is declared:

There seem to be some confusion as for which function should one use. This question covers:

Directive basics

How to declare the various functions?
What is the difference between a source template and an instance template?
In which order the directive functions are executed?
What else happens between these function calls?
Function nature, do's and dont's

Related questions:

Directive: link vs compile vs controller.
Difference between the 'controller', 'link' and 'compile' functions when defining an angular.js directive.
What is the difference between compile and link function in angularjs.
Difference between the pre-compile and post-compile element in AngularJS directives?.
Angular JS Directive - Template, compile or link?.
post link vs pre link in Angular js directives.

asked Aug 17, 2015 in JAVASCRIPT by rajesh
0 votes

Related Hot Questions

1 Answer

0 votes
Function nature, do's and dont's


When the post-link function is called, everything that could take place took place - binding, transclusion etc.

This is typically de-facto place to further manipulate the rendered DOM.


Manipulate DOM (rendered, ie instantiated) elements.
Attach event handlers.
Inspect child elements.
Setup observations on attributes.
Setup watches on the scope.
answered Aug 17, 2015 by rajesh