Compile, pre and post linking in AngularJS

Execution order of the compile, preLink and postLink functions of an element directive with an attribute directive.

by Puigcerber

HTML

<div ng-app="app">
    <parent-elem child-attr></parent-elem>
</div>

JavaScript

var app = angular.module('app', []);
app.directive('parentElem', function() {
    return {
      restrict: 'E',
      compile: function(tElem, tAttrs){
        console.log('parentElem compile');
        return {
          pre: function(scope, iElem, iAttrs){
            console.log('parentElem preLink');
          },
          post: function(scope, iElem, iAttrs){
            console.log('parentElem postLink');
          }
        }
      }
    }    
  });
app.directive('childAttr', function() {
    return {
      restrict: 'A',
      compile: function(tElem, tAttrs){
        console.log('childAttr compile');
        return {
          pre: function(scope, iElem, iAttrs){
            console.log('childAttr preLink');
          },
          post: function(scope, iElem, iAttrs){
            console.log('childAttr postLink');
          }
        }
      }
    }    
  });