前言    

    在我們創(chuàng)建一個angularJS應用的時候，菜單往往往是不可或缺的元素之一。也許在我們靜態(tài)菜單的時候不會發(fā)現(xiàn)在指令中操作菜單收縮、折疊展開沒有任何問題，因為我們在操作之前，頁面元素渲染已經(jīng)完成，所以在指令里面通過element查找目標元素可以成功。但是一旦我們的菜單的數(shù)據(jù)不是靜態(tài)而是通過后臺接口加載動態(tài)數(shù)據(jù)渲染，我們會發(fā)現(xiàn)本來在靜態(tài)寫好的指令操作，在轉(zhuǎn)變?yōu)閯討B(tài)數(shù)據(jù)加載之后，怎么也沒法查找到想要的目標元素。

    遇到如此問題，開始覺得好奇葩的，當然這也是吐槽一下，還是得好好解決問題的，痛定失痛，決心好好理清思路，分析一下問題原因。首先我們先了解一下AngularJS的生命周期。

AngularJS的生命周期

    在AngularJS應用啟動前，它們會以HTML文本的形式保存在文本編輯器中。應用啟動后會進行編譯和鏈接，作用域會同HTML進行綁定，應用可以對用戶在HTML中進行的操作進行實時響應。AngularJS的生命周期主要有兩個主要階段：一個是編譯階段，一個是鏈接階段。

AngularJS生命周期-編譯階段

    在編譯階段，AngularJS會遍歷整個HTML文檔并根據(jù)JavaScript中的指令定義來處理頁面上聲明的指令。每一個指令模板中可能有另一個指令，另一個指令也有可能會有自己的模板。AngularJS調(diào)用HTML文檔根部的指令時，會遍歷其中所有的模板，模板中可能含有模板的指令。如果一個元素已經(jīng)有一個含有模板的指令，永遠不要對其用另一個指令進行修飾，只有最高優(yōu)先級的指令中的模板會被編譯。

    一旦對指令和其中的子模板進行遍歷或編譯，編譯后的模板會返回一個叫做模板函數(shù)的函數(shù)。在這個時候的DOM樹還沒有進行數(shù)據(jù)綁定，此時對DOM樹操作只會有很少的性能開銷，ng-repeat和ng-transclude等內(nèi)置指令會在這個時候?qū)€未進行數(shù)據(jù)綁定的DOM進行操作。比如ng-repeat，它會遍歷指定的數(shù)組或?qū)ο?，在?shù)據(jù)綁定之前構建對應的DOM結構，然后將新的DOM（編譯后的DOM）傳遞給指令生命周期中的下一階段，鏈接階段。一個指令的DOM一旦編譯完成，就可以立即通過編譯函數(shù)對其進行訪問，編譯函數(shù)的簽名包含有訪問指令聲明所在的元素（tElements）及該元素對其他屬性（tAttrs)的方法。

    compile返回對象或函數(shù)，compile()函數(shù)負責對模板DOM進行轉(zhuǎn)換，link()函數(shù)負責將作用域和DOM進行轉(zhuǎn)換。

//...
compile: function(tEle,tAttrs,transcludeFn){
 var tplEl = angular.element('<div>' +'<h2></h2>'+'</div>');
 var h2 = tplEl.find('h2');
 h2.attr('type',tAttrs.type);
 h2.attr('ng-model',tAttrs.ngModel);
 h2.val('hello');
 tEle.replaceWith(tplEl);
 return function(scope, ele, attrs){
  //連接函數(shù)
 };
}
//...

 AngularJS生命周期-鏈接階段

    link函數(shù)創(chuàng)建可以操作DOM的指令，鏈接函數(shù)是可選的。定義了編譯函數(shù)，返回鏈接函數(shù)，當兩個函數(shù)都定義了，編譯函數(shù)會重載鏈接函數(shù)。

//下面2種定義指令的放松在功能上是完全一樣的
angular.module('myApp',[])
.directive('myDirective', function (){
 return {
 pre: function (tElement, tAttrs, transclude){
 //在子元素被鏈接之前執(zhí)行，之后調(diào)用‘link'函數(shù)無法定位鏈接的元素
 
 },
 post: function (scope, iElement, iAttrs, controllers){
   //在子元素被鏈接之后執(zhí)行
 }
 }
});

angular.module('myApp',[])
.directive('myDirective', function (){
 return {
 link: function (scope, ele, attrs){
  return {
  pre: function (tElement, tAttrs, transclude){
  //在子元素被鏈接之前執(zhí)行，之后調(diào)用‘link'函數(shù)無法定位鏈接的元素
  },
  post: function (scope, iElement, iAttrs, controllers){
    //在子元素被鏈接之后執(zhí)行
  }
  }
 }
 }
});

    當定義了編譯函數(shù)來取代鏈接函數(shù)時，鏈接函數(shù)使我們能提供給返回對象的第二個方法，也就是postLink函數(shù)。鏈接函數(shù)會在模板編譯并同作用域進行鏈接后被調(diào)用。

//鏈接函數(shù)簽名
link: function(scope, element, attrs){
 //操作DOM
}
//含require選項， require someContainer
link: function(scope, element, attrs, someContainer){
 //在這里操作DOM，可以訪問require指定的控制器
}

• scope--指令用來在其內(nèi)部的作用域；
• element--參數(shù)代表實例元素，指使用此指令的元素；
• atrrs--代表實例屬性，是一個由定義在元素上的屬性組成的標準化列表，可以在所有指令的鏈接函數(shù)間共享，會以javascript對象的形式進行傳遞；
• controller 參數(shù)指向require選項定義的控制器。沒有設置require選項，controller的參數(shù)為undefined；

    控制器在所有的指令間共享，因此指令可以將控制器當作通信通道（公共API），如果設置多個require，這個參數(shù)是一個控制器實例組成的數(shù)組，而不是一個單獨的控制器。

問題剖析

    在通過對AngularJS生命周期的理解，我們可以清晰地認識到動態(tài)菜單為什么綁定在鏈接階段上的DOM操作沒有成功，由于ng-repeat的原因，我對DOM樹操作沒找到DOM元素。因為在封裝成一個菜單指令組件的時候，我內(nèi)部的菜單數(shù)據(jù)加載使用ng-repeat實現(xiàn)，所以只有在這個時候才能在ng-repeat內(nèi)部綁定對DOM樹的操作。

    最初的寫法：

//html 
<menu-bar>
`````
<div ng-repeat="ml in menuLists">
 ``````
 <div ng-repeat="mls in ml.secondLists">
 ``````
 <div ng-repeat="mlt in mls.thirdLists">
 ``````
 </div>
 ``````
 </div>
 ``````
</div>
``````
</menu-bar>
//directive
angular.module('',[]).directive('menuBar',function (){
 return {
 restrict: 'E',
 replace: true,
 link: function (scope, element, attr){
 //操作菜單的邏輯代碼
 }
 }
});

    這種寫法，在link里面操作菜單邏輯的代碼沒有被觸發(fā)，angularjs的檢測機制也沒用，因為ng-repeat的原因?qū)е翫OM操作事件沒有被掛載到DOM上，所以想操作菜單不可能成功。但是，如果ng-repeat的內(nèi)容是靜態(tài)存在的，link函數(shù)里面的操作是可以實現(xiàn)的。

    修改后的寫法：

//html 
<div ng-repeat="ml in menuLists">
 ``````
 <div ng-repeat="mls in ml.secondLists">
 ``````
 <menu-bar>
 ``````
 <div ng-repeat="mlt in mls.thirdLists">
 ``````
 <menu-bar>
  ``````
 </menu-bar>
 ``````
 </div>
 ``````
 </menu-bar>
 ``````
 </div>
 ``````
</div>
//directive
angular.module('',[]).directive('menuBar',function (){
 return {
 restrict: 'E',
 replace: true,
 link: function (scope, element, attr){
 //操作菜單的邏輯代碼
 }
 }
});

    修改之后我們將我們操作動態(tài)加載的DOM結構的指令放入ng-repeat中，此時邏輯正常執(zhí)行，在link函數(shù)中能打印出DOM結構。

以上所述是小編給大家介紹的AngularJS動態(tài)菜單操作指令，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

最新評論