Quora uses cookies to improve your experience. Read more

Angular Tutorials

Angular directive functions: controller vs link vs compile

Admin · Posted Mar 18, 2015

Directive is a powerful feature of AngularJS because it helps us create modular component which easier to reuse and maintain, but it’s also complicated. How many times did you scratch your head against directive scope, or confuse between compile, controller, and link functions.

Let’s me help you understand those functions in this article.

So when writing a AngularJS directive, you can use these function to manipulate content, look and behavior of the directive, they are:

compile
controller
pre-link
post-link

Most of us are familiar with post-link function because we see it in most of AngularJS tutorials. Most of time we don't need to use pre-link function.

Here is the rules for those functions:

compile should be used when you need modify directive template, like add new expression, append another directive inside this directive…those things . you’ll need to use compile function to do those jobs.
controller is used when you need to share or reuse $scope data. Or when you want directive interactive with each other.
link is the function which used when you need to attach event handler, modify DOM.

I implemented the examples for these functions at here: Compile, Controller, Link examples

Below is an example of compile function.

angular
      .module('app', [])
      .directive('compileExample', compileExample);

    function compileExample() {
      return {
        restrict: 'E',
        scope: true,
        compile: function(tElement, tAttrs) {
          angular.element(tElement).append("My name is {{name}}");
          return function postLink(scope, element, attrs) {
            scope.name = 'David'
          }
        }
      }
    }

In the compile function, we append an expression {{name}} into the template and in the link function, we assign “David” to scope.name and directive return: “My name is David”

We can’t do that in the postLink function because it can’t compile angular expression.

About the controller function, it’s used when we need to share $scope variables or function or reuse it in another directive.

Here is an example of our directive

angular
      .module('app', [])
      .directive('parentDirective', parentDirective)
      .directive('childDirective', childDirective);

function parentDirective() {
      return {
        restrict: 'E',
        scope: true,
        controller: function($scope) {
          $scope.name = 'Ronaldo';
          $scope.say = function() {
            alert('Hello ' + $scope.name);
          }
        }
      }
    }

    function childDirective() {
      return {
        restrict: 'E',
        require: '^parentDirective',
        link: function(scope) {
          scope.name = 'Elisa';
          scope.say();
        }
      }
    }

In order to use childDirective, we need to wrap the childDirective inside parentDirective, just like this. If you don’t do that childDirective will complain that it can’t find parentDirective and a kitty will die somewhere.

<parent-directive>
  <child-directive></child-directive>
</parent-directive>

So when the childDirective is instantiated, we see the alert box with message: “Hello Elisa”. The say() method is inherited from the parentDirective, we change $scope.name from Ronaldo to Elisa and get that nice message.

Conclusion:
First time when you work with Angular directive, you may confuse about compile, controller and link function. So here is the usage for those functions:

Compile is used for modify directive template, append Angular expression, inject another directive to the parent directive.
Controller is used when you need to share or reuse directive method.
Link is used when you need to modify DOM, attach event handler or run some jQuery code.

You can see live example at here: Compile, Controller, Link examples

Thanks for reading, see you in the next article.

73 views · View 39 Upvoters

Please log in to add a comment.