Angular directive递归实现目录树结构

效果图
在线预览&代码实现
重点:

  1. 整棵目录树的实现,通过嵌套完成,主要在于对treeItem.html的递归使用

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <script type="text/ng-template" id="treeView.html">
    <ul>
    <li ng-repeat="item in treeData.children" ng-include="'treeItem.html'"></li>
    </ul>
    </script>

    <script type="text/ng-template" id="treeItem.html">
    <span class="color-indictor" ng-class="{'leaf-node': isLeaf(item), 'expand-node': !isLeaf(item) && item.isExpand, 'unexpand-node': !isLeaf(item) && !item.isExpand}" ng-click="toggleExpandStatus(item)"></span>
    <span>{{item.name}}</span>
    <ul ng-if="!isLeaf(item)" ng-show="item.isExpand">
    <li ng-repeat="item in item.children" ng-include="'treeItem.html'"></li>
    </ul>
    </script>

  2. 点击展开/关闭目录树
    通过ng-show对item.expand进行判断,点击item时切换其expand参数,完成目录树的打开与关闭

参考链接:
Angular实现递归指令 - Tree View
引入ng-include和模板ng-template

本文首发于http://www.miaoyunze.com/,转载请注明出处