angular tree 異步加載下一級菜單 的正確修改方式

angular中的tree樹形結構在github上也越來越豐富，使用起來也蠻方便的，可是項目中有這麼一個現實情況，導致靜態頁面加載數據後造成明顯卡頓。

我找到的插件是叫angular-bootstrap-nav-tree，github上地址是這裏，使用方法是講一個嵌套結構的的json一起賦值給指令中的tree-data屬性，就能生成一個tree型結構的list。

目前項目中現實情況是，tree裏邊數據量特別大，成百上千，甚至有的頁面要上萬條。這樣一股腦塞進這個tree裏邊的方法肯定會卡，肯定就想展開哪一層就請求並加載哪一層的數據。每點加號的時候，就請求並加載下級的數據。這就需要把abn_tree_directive指令改一下。

點擊“+”號的時候，觸發一個事件，發送請求。在abn_tree_directive第11行原來i裏邊是這麼寫的ng-click=’a.branch.expanded = !a.branch.expanded’，現在改成一個觸發controller中事件ng-click=’i_click(row) ‘,把它自己作爲參數傳進去。
在abn_tree_directive代碼link函數中增加如下片段：

scope.i_click=function(a){
              a.branch.expanded = !a.branch.expanded;//將原來控制節點打開摺疊的代碼拷過來 
              scope.user_clicks_branch(a.branch);//取到加號對應的節點，因爲可能目前選取狀態不是你點+號的這個節點，這樣就會增加節點出錯
              if(a.branch.i_click){//這是調用controller裏的定義的方法，如果傳過來的數據中有i_click字段，就執行它
                a.branch.i_click(a);
              }       
          }

以下爲controller裏請求並增加i_click事件

 $http.post('http://pings.iok.la:35612/oapm/sys/org/treelist',{"body":{"parentid":''}}).success(function(response){
     angular.forEach(response.body.entity.orgList, function(value, key){
            if(value.isleaf==0){//這是爲了控制節點i圖標爲“+”號
                value.noLeaf=true;
            }else{
                value.noLeaf=false;
            }
            value.i_click=pull_data;//將數據增加一個i_click字段
            value.onSelect=last_selected;
        });
    $scope.my_data=response.body.entity.orgList
 })
 //以下爲點擊加號觸發的事件，首先請求數據，循環，並添加到當前節點下邊。
 pull_data=function(a){
     if(a.branch.children.length<1){
          $http.post('http://pings.iok.la:35612/oapm/sys/org/treelist',{"body":{"parentid":a.branch.id}}).success(function(response){
              var b = tree.get_selected_branch();
              angular.forEach(response.body.entity.orgList, function(value, key){
                    if(value.isleaf==0){
                        value.noLeaf=true;
                    }else{
                        value.noLeaf=false;
                    }
                    value.i_click=pull_data;
                    value.onSelect=last_selected;
                   return tree.add_branch(b, value)
              });
          })
      }   
 }

筆者水平有限，寫的可能含混不清，如果你也有類似的需求，想改造這個angular-bootstrap-nav-tree插件，請留言，一點鼎力相助