本篇文章跟大家介紹一下angular指令中的preLink和postLink函數。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。
【相關推薦：《angular教學》】
指令範本選項有complie和link兩個字段，兩者之間存在如下關係：
angular透過這樣directive.compile = valueFn(directive.link);包裝一層，使用使用者定義的link欄位。 而link分為preLink和postLink兩個階段，從link欄位或是compile函數的回傳值來看：
app.directive('myDirective', function () {
return {
compile: function () {
return {
pre: function () {
console.log('preLink');
},
post: function () {
console.log('postLink');
}
}
}
}
});我們的指令工廠返回的是一個函數，那麼angular透過這樣的包裝 directive = { compile: valueFn(directive) }，即該函數將作為指令對象的postLink函數，像這樣：
app.directive('myDirective', function () {
return function () {
console.log('postLink');
}
});為了看清angular編譯連結指令的順序，用以下程式碼輸出日誌的方式來說明：
<body ng-app="myApp">
<A a1>
<B b1 b2></B>
<C>
<E e1></E>
<F>
<G></G>
</F>
</C>
<D d1></D>
</A>
</body>
var app = angular.module('myApp', []);
var names = ['a1', 'b1', 'b2', 'e1', 'd1'];
names.forEach(function (name) {
app.directive(name, function () {
return {
compile: function () {
console.log(name + ' compile');
return {
pre: function () {
console.log(name + ' preLink');
},
post: function () {
console.log(name + ' postLink');
}
};
}
};
});
});輸出：
a1 compile b1 compile b2 compile e1 compile d1 compile a1 preLink b1 preLink b2 preLink b2 postLink b1 postLink e1 preLink e1 postLink d1 preLink d1 postLink a1 postLink
可以看出：
所有的指令都是先compile，然後preLink，然後postLink。
節點指令的preLink是在所有子節點指令preLink，postLink之前，所以一般這裡就可以透過scope給子節點傳遞一定的訊息。
節點指令的postLink是在所有子節點指令preLink，postLink完畢之後，也就意味著，當父節點指令執行postLink時，子節點postLink已經都完成了，此時子dom樹已經穩定，所以我們大部分dom操作，訪問子節點都在這個階段。
指令在link的過程，其實是一個深度優先遍歷的過程，postLink的執行其實是一個回溯的過程。
節點上的可能有若干指令，在蒐集的時候就會按一定順序排列（透過byPriority排序），執行的時候，preLinks是正序執行，而postLinks則是倒序執行。
明白了這些以後，就要小心一些容易忽略的陷阱。
<body ng-app="myApp">
<my-parent></my-parent>
</body>
var app = angular.module('myApp', []);
app.directive('myParent', function () {
return {
restrict: 'EA',
template: '<div>{{greeting}}{{name}}'+
'<my-child></my-child>'+
'</div>',
link: function(scope,elem,attr){
scope.name = 'Lovesueee';
scope.greeting = 'Hey, I am ';
}
};
});
app.directive('myChild', function () {
return {
restrict: 'EA',
template: '<div>{{says}}</div>',
link: function(scope,elem,attr){
scope.says = 'Hey, I am child, and my parent is ' + scope.name;
}
};
});結果子指令輸出為undefined
Hey, I am Lovesueee Hey, I am child, and my parent is undefined
由上可以，myParent指令的link是一個postLink函數，而這個函數將在myChild指令的preLink和postLink執行完之後才執行。所以scope.name = undefined。
更多程式相關知識，請造訪：程式設計入門！ ！
以上是聊聊angular指令中的preLink和postLink函數的詳細內容。更多資訊請關注PHP中文網其他相關文章！
