AngularJS : How does the HTML compiler arrange the order for compiling?

angularjs, angularjs-directive

Solution

I asked the same question in the AngularJS mailing list and Peter Bacon Darwin gave a great answer with a jsfiddle for demonstration. Link

Problem

When there are multiple directives across multiple elements on a page, how does Angular's HTML compiler arrange the order for compiling? Say I have the following markups, where alpha, beta, and gamma are custom Angular directives, ``` <html ng-app> <alpha><beta></beta></alpha> <gamma></gamma> </html> ``` What's the order the compiler would work on them? Is it alpha => gamma => beta? Or is it alpha => beta => gamma? To complicate things a little bit more, consider alpha directive's template has another custom directive, called foo. When would foo get compiled? After all of the above directives get compiled? Or right after alpha is compiled?

Original source