Angular實現遞歸指令 - Tree View

在層次數據結構展示中，樹是一種極其常見的展現方式。比如系統中目錄結構、企業組織結構、電子商務產品分類都是常見的樹形結構數據。

這里我們采用Angular的方式來實現這類常見的tree view結構。

首先我們定義數據結構，采用以children屬性來掛接子節點方式來展現樹層次結構，示例如下：

[
   {
      "id":"1",
      "pid":"0",
      "name":"家用電器",
      "children":[
         {
            "id":"4",
            "pid":"1",
            "name":"大家電"
         }
      ]
   },
   {
     ...
   }
   ...
]

則我們對於ng way的tree view可以實現為：

JavaScript:

angular.module('ng.demo', [])
.directive('treeView',[function(){

     return {
          restrict: 'E',
          templateUrl: '/treeView.html',
          scope: {
              treeData: '=',
              canChecked: '=',
              textField: '@',
              itemClicked: '&',
              itemCheckedChanged: '&',
              itemTemplateUrl: '@'
          },
         controller:['$scope', function($scope){
             $scope.itemExpended = function(item, $event){
                 item.$$isExpend = ! item.$$isExpend;
                 $event.stopPropagation();
             };

             $scope.getItemIcon = function(item){
                 var isLeaf = $scope.isLeaf(item);

                 if(isLeaf){
                     return 'fa fa-leaf';
                 }

                 return item.$$isExpend ? 'fa fa-minus': 'fa fa-plus';   
             };

             $scope.isLeaf = function(item){
                return !item.children || !item.children.length; 
             };

             $scope.warpCallback = function(callback, item, $event){
                  ($scope[callback] || angular.noop)({
                     $item:item,
                     $event:$event
                 });
             };
         }]
     };
 }]);

　　

HTML:

樹內容主題HTML： /treeView.html

<ul class="tree-view">
       <li ng-repeat="item in treeData" ng-include="'/treeItem.html'" ></li>
</ul>

　　

每個item節點的HTML：/treeItem.html

<i ng-click="itemExpended(item, $event);" class=""></i>

<input type="checkbox" ng-model="item.$$isChecked" class="check-box" ng-if="canChecked" ng-change="warpCallback('itemCheckedChanged', item, $event)">

<span class='text-field' ng-click="warpCallback('itemClicked', item, $event);"></span>
<ul ng-if="!isLeaf(item)" ng-show="item.$$isExpend">
   <li ng-repeat="item in item.children" ng-include="'/treeItem.html'">
   </li>
</ul>

這里的技巧在於利用ng-include來加載子節點和數據，以及利用一個warpCallback方法來轉接函數外部回調函數，利用angular.noop的空對象模式來避免未注冊的回調場景。對於View交互的數據隔離采用了直接封裝在元數據對象的方式，但它們都以$$開頭，如$$isChecked、$$isExpend。在Angular程序中以$$開頭的對象會被認為是內部的私有變量，在angular.toJson的時候，它們並不會被序列化，所以利用$http發回服務端更新的時候，它們並不會影響服務端傳送的數據。同時，在客戶端，我們也能利用對象的這些$$屬性來控制View的狀態，如item.$$isChecked來默認選中某一節點。

我們就可以如下方式來使用這個tree-view：

<tree-view tree-data="demo.tree" text-field="name" value-field='id' item-clicked="demo.itemClicked($item)" item-checked-changed="demo.itemCheckedChanged($item)" can-checked="true"></tree-view>

效果如下，當然你也可以在jsbin中體驗它：