1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <script src="../lib/angular-1.3.16/angular.min.js"></script> 6 <script src=""></script> 7 <title></title> 8 <script language="JavaScript"> 9 var count = 0; 10 var logText=function(text){ 11 count++; 12 console.log(count+'，'+text); 13 }; 14 angular.module("app", []) 15 .controller("mainController", function ($scope) { 16 $scope.logText = logText; 17 logText('控制器初始化。'); 18 }).directive('d',function() { 19 logText('指令初始化。'); 20 return{ 21 link: { 22 pre: function () { 23 logText('preLink函數執行。'); 24 }, 25 post: function () { 26 logText('postLink函數執行。'); 27 } 28 }, 29 controller:function(){ 30 logText('內部控制器初始化。'); 31 }, 32 template:'{{logText("模板表達式執行。")}}' 33 34 }; 35 }); 36 </script> 37 </head> 38 <body ng-app="app"> 39 <div ng-controller="mainController"> 40 <div d></div> 41 <div d></div> 42 </div> 43 </body> 44 </html>
控制台:
從控制台可以看出，指令初始化甚至比控制器還早。難道說指令一旦定義，就算不在DOM中使用也會初始化？我們刪掉DOM中的
<div d></div>
<div d></div>
代碼，再看控制台，發現指令並不初始化。所以推測不對。
注意我們使用了兩次d指令，但是指令的初始化只運行了一次。這個要特別小心。
另外指令內部的控制器初始化比鏈接函數更早執行，此后就是執行preLink和postLink。一個指令把這些執行完畢，才輪到下一個指令。
模板里的表達式居然執行了6次之多，也就是說使用一次指令就要執行3次表達式，這個在性能上需要多加考慮。
以下代碼加入了編譯函數（compile並不常用，不需要深入了解）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="../lib/angular-1.3.16/angular.min.js"></script>
<script src=""></script>
<title></title>
<script language="JavaScript">
var count = 0;
var logText=function(text){
count++;
console.log(count+'，'+text);
};
angular.module("app", [])
.controller("mainController", function ($scope) {
$scope.logText = logText;
logText('控制器初始化。');
}).directive('d',function() {
logText('指令初始化。');
return{
compile: function(){
logText('編譯函數執行。');
return{
pre: function () {
logText('preLink函數執行。');
},
post: function () {
logText('postLink函數執行。');
}
};
},
controller:function(){
logText('內部控制器初始化。');
}
};
});
</script>
</head>
<body ng-app="app">
<div ng-controller="mainController">
<div d></div>
<div d></div>
</div>
</body>
</html>
控制台輸出：
可以看出編譯函數比控制器更早執行，但是跟指令的初始化不同，使用兩次指令就需要運行兩次編譯函數。
上面例子在使用指令時，元素是並列的。
那么，一個元素使用兩個指令，或兩個指令嵌套使用，會怎么樣呢？
看代碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="../lib/angular-1.3.16/angular.min.js"></script>
<script src=""></script>
<title></title>
<script language="JavaScript">
var count = 0;
var logText=function(text){
count++;
console.log(count+'，'+text);
};
angular.module("app", [])
.controller("mainController", function ($scope) {
$scope.logText = logText;
logText('mainController控制器初始化。');
}).directive('d1',function() {
logText('d1 指令初始化。');
return{
priority:1,
compile: function(){
logText('d1 編譯函數執行。');
return{
pre: function () {
logText('d1 preLink函數執行。');
},
post: function () {
logText('d1 postLink函數執行。');
}
};
},
controller:function(){
logText('d1 內部控制器初始化。');
}
};
}).directive('d2',function() {
logText('d2 指令初始化。');
return{
compile: function(){
logText('d2 編譯函數執行。');
return{
pre: function () {
logText('d2 preLink函數執行。');
},
post: function () {
logText('d2 postLink函數執行。');
}
};
},
controller:function(){
logText('d2 內部控制器初始化。');
}
};
});
</script>
</head>
<body ng-app="app">
<div ng-controller="mainController">
<div d1 d2></div>
</div>
</body>
</html>
以上代碼定義d1指令和d2指令，且它們在同一個元素上使用。注意d1的優先級更高。
關於優先級的問題，可回頭看文章http://www.cnblogs.com/sagacite/p/4622092.html
控制台輸出：
可以發現跟並列元素不同，在同一個元素上使用兩個指令，其內部控制器初始化、preLink函數和postLink函數分組執行，而不是先執行完一個指令的，再執行下一個指令的。
更換指令的使用次序：<div d2 d1></div>
可以發現這時d2指令先初始化，但是其他函數的執行次序都不變。
修改DOM的代碼如下：
<div d1><div d2></div></div>
再看控制台：
可以發現d2指令的初始化延遲到d1編譯函數執行之后了。內部控制器的初始化次序也發生了變化。