Directive compile and link execution order

by cmyworld

HTML

<div ng-app='myApp'>
    <div hi-there="Parent1">Parent1
        <div hi-there="Parent1.child1">.Child1</div>
        <div hi-there="Parent1.child2">.Child2</div>
    </div>
    <div hi-there="Parent2">Parent2
        <div hi-there="Parent2.Child1">.Child1
            <div hi-there="Parent2.Child1.Child1.1">.Child1.1</div>
            <div hi-there="Parent2.Child1.Child1.2">.Child1.2</div>
        </div>
        <div hi-there="Parent2.Child2">.Child2</div>
    </div>
    <div hi-there="Parent3">Parent3</div>
    <div hi-there="Parent4">Parent4</div>
    <div hi-there="Parent5">Parent5</div>
</div>

JavaScript

angular.module('myApp', []).directive('hiThere', function () {
    return {
        compile: function (element, attr) {
            console.log("Compiling:" + attr.hiThere);
            return {
                pre: function (scope, element, attr) {
                    console.log("Pre-Linking:" + attr.hiThere);
                },
                post: function (scope, element, attr) {
                    console.log("Post-Linking:" + attr.hiThere);
                }
            }
        }
    };
});