AngularJS递归指令实现Tree View效果示例

本文实例讲述了angularjs递归指令实现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>

效果如下：

希望本文所述对大家angularjs程序设计有所帮助。