Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Compile order of parent and child directives in AngularJS
1. compile methods of all directives, run in order
2. controller
3. pre-link
4. (all actions of children directives)
5. post-link (AKA regular `link` function)
var app = angular.module('app',[]);
app.directive('bigPoppa', function($q){
return {
restrict: 'E',
controller: function($scope){ console.log('bigPoppa controller'); },
compile: function(scope, el) {
console.log('bigPoppa compile');
return {
pre: function(){ console.log('bigPoppa pre'); },
post: function(){ console.log('bigPoppa post'); }
app.directive('babyBird', function(){
return {
restrict: 'E',
controller: function(){ console.log('babyBird controller'); },
compile: function(scope, el) {
console.log('babyBird compile');
return {
pre: function(){ console.log('babyBird pre'); },
post: function(){ console.log('babyBird post'); }
console.log(''); // blank line

This comment has been minimized.

Copy link
Owner Author

SimplGy commented Aug 5, 2014

The output is:

bigPoppa compile
babyBird compile
bigPoppa controller
bigPoppa pre
babyBird controller
babyBird pre
babyBird post
bigPoppa post 
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.