angular.js指令中的controller、compile與link函數的不同之處

2019-11-19 16:37:08

字體：大中小

來源：轉載

供稿：網友

前言

算了算用angualrjs去做開發(fā)也有兩個月了，但做為一個菜鳥，難免會被大神吊打(這里有一個悲傷的故事...)。某天一位前端大神問我：你知道angular指令中的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函數;我們可以思考一下上面會輸出一下什么來.

從上面的輸出結果我們可以得出兩個結論:

他們的執(zhí)行順序不同,最先執(zhí)行的是complie函數 ; 然后是controller函數,然后是pre函數,最后是post函數.
link函數沒有執(zhí)行.

首先我們來解釋第一個問題;看下圖

從圖中我們可以看到整個 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){       // 在子元素被鏈接之前執(zhí)行       // 在這里進行Dom轉換不安全      },      post:function(scope, iElement, iAttrs, controller){       // 在子元素被鏈接之后執(zhí)行      }     }  } }})

第二個階段是鏈接階段:

鏈接函數來將模板與作用域鏈接起來;負責設置事件監(jiān)聽器，監(jiān)視數據變化和實時的操作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")    }   }  });

上面指令執(zhí)行時;會輸出:

我們可以看到controller函數先執(zhí)行,然后是link函數.但是鏈接階段會執(zhí)行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>

結果如圖: