AngularJS directive life cycle methods

In this example below you will see how to do a AngularJS directive life cycle methods with some HTML / CSS and Javascript

This awesome code was written by 01abhishekjain, you can see more from this user in the personal repository.
You can find the original code on
Copyright 01abhishekjain ©


  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
  <title>AngularJS directive life cycle methods</title>


  <body ng-app="app">

  <div life-cycle name="first">FIRST
    <div life-cycle name="..second">SECOND
      <div life-cycle name="....third">THIRD
      <div life-cycle name="....fourth">FOURTH

  <hr> EXAMPLE 2:
  <div life-cycle name="{{i}}" ng-repeat="i in [1,2,3]">{{i}}</div>

      <li>Directive life cycle can be divided into 4 stages: compile, controller, pre-link, and post-link</li>
      <li><b>Compile</b> is when angularJS traverses the DOM looking to match elements with directive declarations</li>
      <li>During compile, neither the scope is available, nor is the directive template (i.e. the cloned instance of the directive) </li>
      <li>What IS available, are the TEMPLATE element and TEMPLATE attributes</li>
      <li>Compile is executed only once. For example if we had an ng-repeat on a custom directive, which makes, say, 3 instances of that directive, the compile function will be executed only once for all three.</li>
      <li><b>Controller</b> executes next and we can set up the data and functions on the directive since the SCOPE IS NOW INITIALIZED</li>
      <li>Do not use it for manipulating the DOM, that can be done in the (post-)link stage</li>
      <li><b>Pre-link</b> executes immediately after the controller. Here, the DOM instance of the directive is cloned and available to be used/manipulated</li>
      <li>However, should still wait till the (post-)link stage to perform DOM manipulations</li>
      <li>Pre-link does have access to the set up scope, so can modify the data here</li>
      <li>The scope data and the DOM instance have not yet been bound together though</li>
      <li>Nor have any child directive instances been set up</li>
      <li>Basically this is almost never used, since the data can be modified in the controller itself</li>
      <li><b>Post-link</b>, or simple <b>Link</b> is the final stage before rendering the directive.</li>
      <li>called link because here the scope and the instance are LINKED ie bound together</li>
      <li>even all the child directives are ready ie have undergone linking which is why in the example, the post link functions execute in the reverse order (see console)</li>
      <li>used mainly for doing any DOM manipulations</li>


  <script src=''></script>


    <script  src="js/index.js"></script>



/*Downloaded from */
var app = angular.module("app", []);

app.directive("lifeCycle", function() {
  return {
    compile: function(tElement, tAttributes) {
      console.log( + " compile");
      if ( === "..second") tElement.css({ background: "red" });
      if ( === "....third") tElement.css({ color: "yellow" });
      return {
        pre: function(scope, iElem, iAttrs) {
          console.log( + " pre-link");
        post: function(scope, iElem, iAttrs) {
          console.log( + " post-link");

    controller: [
      function(scope, iElem, iAttrs) {
        console.log( + " controller");