本篇文章為大家展示了angular.js指令中的controller、compile與link函數三者的區別是什么，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。
var ag = angular.module("myApp",[]);
ag.controller("myCtrl",["$rootScope",function($rootScope){
}]);
ag.directive("order",function(){
return{
restrict:"AE",
controller:function($scope, $element, $attrs, $transclude) {
console.log("controller");
},
compile:function(tElement, tAttrs, transclude){
console.log("compile");
return{
pre:function(scope, iElement, iAttrs, controller){
console.log("pre")
},
post:function(scope, iElement, iAttrs, controller){
console.log("post")
}
}
},
link:function(scope, iElement, iAttrs, controller){
console.log("link")
}
}
});我們可以看到什么order指令中寫了controller, complie, link函數;我們可以思考一下上面會輸出一下什么來.
從上面的輸出結果我們可以得出兩個結論:
他們的執行順序不同,最先執行的是complie函數 ; 然后是controller函數,然后是pre函數,最后是post函數.
link函數沒有執行.
首先我們來解釋第一個問題;看下圖
從圖中我們可以看到整個 AngularJs 的生命周期分為兩個階段:
第一個階段是編譯階段:
在編譯階段，AngularJS會遍歷整個HTML文檔并根據JavaScript中的指令定義來處理頁面上聲明的指令。每一個指令的模板中都可能含有另外一個指令，另外一個指令也可能會有自己的模板。當AngularJS調用HTML文檔根部的指令時，會遍歷其中所有的模板，模板中也可能包含帶有模板的指令.一旦對指令和其中的子模板進行遍歷或編譯，編譯后的模板會返回一個叫做模板函數的函數。我們有機會在指令的模板函數被返回前，對編譯后的DOM樹進行修改。
ag.directive("order",function(){
return{
restrict:"AE",
compile:function(tELe ,tAttrs,transcludeFn){
//進行編譯后的dom操作
return{
pre:function(scope, iElement, iAttrs, controller){
// 在子元素被鏈接之前執行
// 在這里進行Dom轉換不安全
},
post:function(scope, iElement, iAttrs, controller){
// 在子元素被鏈接之后執行
}
}
}
}
})第二個階段是鏈接階段:
鏈接函數來將模板與作用域鏈接起來;負責設置事件監聽器，監視數據變化和實時的操作DOM.鏈接函數是可選的。如果定義了編譯函數，它會返回鏈接函數，因此當兩個函數都定義了時，編譯函數會重載鏈接函數.(解釋上面的結論2)
var ag = angular.module("myApp",[]);
ag.controller("myCtrl",["$rootScope",function($rootScope){
}]);
ag.directive("order",function(){
return{
restrict:"AE",
controller:function($scope, $element, $attrs, $transclude) {
console.log("controller");
},
link:function(scope, iElement, iAttrs, controller){
console.log("link")
}
}
});上面指令執行時;會輸出:
我們可以看到controller函數先執行,然后是link函數.但是鏈接階段會執行controller,link函數;那么他們有什么不同;我們在什么情況該用哪個?
答案是:
指令的控制器和link函數可以進行互換?？刂破髦饕怯脕硖峁┛稍谥噶铋g復用的行為，但鏈接函數只能在當前內部指令中定義行為，且無法在指令間復用.link函數可以將指令互相隔離開來，而controller則定義可復用的行為。
實際使用的一些建議:
如果我們希望將當前指令的API暴露給其他指令使用，可以使用controller參數，否則可以使用link來構造當前指令元素的功能性。如果我們使用了scope.$watch()或者想要與DOM元素做實時的交互，使用鏈接會是更好的選擇。
到這里:我們應該有一點了解這三者有什么差異了吧?其實這個問題考的就是我們對AngularJs生命周期的了解.
最后我們用一個實際例子來看一下AngularJs的生命周期:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<div parent>
<div child></div>
</div>
<script src="../plugins/angularjs/angular.src.js"></script>
<script>
var ag = angular.module("myApp",[]);
ag.controller("myCtrl",["$rootScope",function($rootScope){
}]);
ag.directive("parent",function(){
return{
restrict:"AE",
controller:function($scope, $element, $attrs, $transclude) {
console.log("parent controller");
},
compile:function(tElement, tAttrs, transclude){
console.log("parent compile");
return{
pre:function(scope, iElement, iAttrs, controller){
console.log("parent pre")
},
post:function(scope, iElement, iAttrs, controller){
console.log("parent post")
}
}
}
}
});
ag.directive("child",function(){
return{
restrict:"AE",
controller:function($scope, $element, $attrs, $transclude) {
console.log("child controller");
},
compile:function(tElement, tAttrs, transclude){
console.log("child compile");
return{
pre:function(scope, iElement, iAttrs, controller){
console.log("child pre")
},
post:function(scope, iElement, iAttrs, controller){
console.log("child post")
}
}
}
}
});
</script>
</body>
</html>結果如圖:
可以參照上面的angularjs生命周期圖來理解.
上述內容就是angular.js指令中的controller、compile與link函數三者的區別是什么，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
