Angular directive递归实现目录树结构代码实例

(编辑：jimmy 日期: 2026/5/19 浏览：3 次 )

整理文档，搜刮出一个Angular directive递归实现目录树结构代码实例代码，稍微整理精简一下做下分享。

效果图：

重点：

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

  <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参数，完成目录树的打开与关闭

3. 源码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇：Vue中使用vux的配置详解
下一篇：微信小程序开发图片拖拽实例详解