溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關angular指令中preLink和postLink函數的示例分析，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
指令模板選項有complie和link兩個字段，兩者之間存在如下關系：
當compile字段存在時，link字段將被忽略，compile函數的返回值將作為link字段。
當compile不存在，link字段存在時，angular通過這樣directive.compile = valueFn(directive.link);包裝一層，使用用戶定義的link字段。
而link分為preLink和postLink兩個階段，從link字段或者compile函數的返回值來看：
如果是函數，那么這樣的link，會被認為是postLink。
如果是對象，那么link.pre作為preLink函數，link.post作為postLink函數。
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函數的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
