问在angularjs中的层次结构实现

EN

<div class="panel-body">
     <div class="col-sm-12">
        <div ui-tree id="tree-root" ng-if="data.length > 0" data-drop-enabled="false" data-drag-enabled="false" data-nodrop-enabled="true">
           <ol ui-tree-nodes ng-model="data">
              <li ng-repeat="node in data" ui-tree-node ng-include="'nodes_renderer.html'" ></li>
           </ol>
        </div>
     </div>
  </div>

<script type="text/ng-template" id="nodes_renderer.html">

 <div ui-tree-handle class="tree-node tree-node-content">

   <a class="btn btn-success btn-xs" ng-if="node.nodes && node.nodes.length > 0" data-nodrag ng-click="toggle(this)"><span
   class="glyphicon"
   ng-class="{
     'glyphicon-chevron-right': collapsed,
     'glyphicon-chevron-down': !collapsed
   }"></span></a>

   <a class="btn btn-xs" data-nodrag>
       <img ng-src="{{node.image}}" class="img-avatar" alt="Avatar" height="35" width="35"></a>
   {{node.title}}


   <div class="dropdown pull-right ">
       <a class="btn btn-primary btn-xs dropdown-toggle" data-toggle="dropdown" data-nodrag><span class="glyphicon glyphicon-th-list"></span></a>
       <div class="dropdown-content dropdown-menu" data-nodrag>
           <a ng-show = "flagCreateUserHierarchy" ng-click="btnAddUserClick(this)"><i class="fa fa-user"></i> Add User</a>
           <a ng-show = "flagUpdateUserHierarchy" ng-click="btnEditClick(this)"><i class="fa fa-folder-open"></i> Edit</a>
           <a ng-show="{{node.type}} <2 && flagUpdateUserHierarchy" ng-click="btnEditGroupClick(this)"><i class="fa fa-folder-open"></i> Edit Group Name</a>
           <a ng-show = "flagUpdateUserHierarchy" ng-click="btnDeleteHierarchy(this)"><i class="fa fa-ban"></i> Delete</a>
       </div>
   </div>

$scope.items = [
  new File('item1', '/item1', 11, false),
  new File('item2', '/item2', 22, true),
  new File('item3', '/item3', 33, false),
  new File('A Really Long File Name Should Go Here', '/item4', 44, false),
  new Folder('Folder 1', '/folder1', [new File('item5', '/item5', 55, false)], false)
];

<table class="table table-condensed table-responsive">
<tbody>
    <tr>
      <th></th>
      <th>Name</th>
      <th>Size</th>
      <th></th>
    </tr>
    <tr ng-repeat="item in getFiles()">
      <td class="minWidth4px">
        <input type="checkbox" ng-model="item.isSelected" />
      </td>
      <td class="truncateName">
        {{item.name}}
      </td>
      <td class="minWidth4px">{{item.size}}mb</td>
      <td ng-show="item.canPreview()" class="minWidth4px">
        <button class="btn" ng-click="openPreview(item)">Preview</button>
      </td>
    </tr>
    <tr ng-repeat="item in getFolders()" ng-click="openFolder(item)">
      <td class="minWidth4px">
        <i ng-show="item.isOpen" class="fa fa-folder-open-o"></i>
        <i ng-hide="item.isOpen" class="fa fa-folder-o"></i>
      </td>
      <td colspan="3">
        <label>{{item.name}}</label>
        <attachments ng-show="item.isOpen" items="item.items"></attachments>
      </td>
    </tr>
  </tbody>
</table>

var attachmentsLink = function($scope) {
  $scope.openFolder = function(folder) {
    folder.isOpen = !folder.isOpen;
    console.log(folder);
  };

  $scope.getFiles = function() {
    return $scope.items.filter(function(x) {
      return x instanceof File;
    });
  };

  $scope.getFolders = function() {
    return $scope.items.filter(function(x) {
      return x instanceof Folder;
    });
  };
};

var attachmentsController = function($scope, previewService){
  $scope.openPreview = function(file) {
    previewService.preview = file;
    previewService.showPreview = true;
  };
};

var attachments = function(RecursionHelper) {
  return {
    compile: function(element) {
      return RecursionHelper.compile(element, attachmentsLink);
    },
    controller: attachmentsController,
    restrict: 'E',
    scope: {
      items:'=',
    },
    templateUrl: 'attachments.html'
  };
};

angular.module("app").directive("attachments", attachments);