Multiple directive define compilation and link order---Execution order when on a DOM element

JS Code:

Myapp.controller (' Ctrl ', [' $scope ', function ($scope) {$scope. ability=[];}]); Myapp.directive (' Supperman ', function () {return {restrict: ' AE ',//scope:{}, Controller:func                      tion ($scope) {//Controller is a function//$scope. ability=[];
           Internal controller requires $scope THIS.ADD1 = function () {$scope. Ability.push ("AAA");
           };
           THIS.ADD2 = function () {$scope. Ability.push ("BBB");
           };
           THIS.ADD3 = function () {$scope. Ability.push ("CCC");

        }; }, Link:function (scope,element,attr) {element.bind (' MouseEnter ', function () {Consol     E.log (scope.ability);
        Here has been used to receive the superior passed the $scope, of course, to use formal parameter name calls, can not be used $scope});

}
    }
}); Myapp.directive (' add111 ', function () {return {//Template: ' <div>hello add1 </div> ', requ   IRE: ' ^supperman ',                    Here is the introduction of directive ....
        , not controller link:function (Scope,element,attr,ctrl) {debugger ctrl.add1 ();

}
    }
});         Myapp.directive (' add222 ', function () {return {//Template: ' <div>hello add2}</div> ',
            Restrict default is a require: ' ^supperman ', link:function (Scope,element,attr,ctrl) {debugger
        CTRL.ADD2 ();

}
    }
}); Myapp.directive (' add333 ', function () {return {//Template: ' <div>hello add3 </div> ', requ
        IRE: ' ^supperman ', link:function (Scope,element,attr,ctrl) {debugger ctrl.add3 (); }
    }
});

HTML code:

<div>
    <supperman add111> superman 1</supperman>
</div>
<div>
    < Supperman add111 add222 > Superman 2</supperman>
</div>
<div>
    <supperman add111 add222 add333> Superman 3</supperman>
</div>

Execution results:

Explanation of Reason:

See Angular Official document

When there are multiple directives defined on a single DOM element, sometimes it are necessary to specify the order in whic H the directives are applied. The priority is used to sort the directives before their compile functions get called. Priority is defined as a number. Directives with greater numerical priority are compiled. Pre-Link functions are also run in priority, but post-link the functions run in are order. The order of directives with the same priority is undefined. The default priority is 0. When multiple directive are applied to a DOM element, priority is required to specify the order in which the directive is executed, priority with numbers;

Compile when the priority is large first compiled;

Link when the priority of a large post links, reverse order.

The precedence does not specify that the default is 0, and the order of execution cannot be determined.