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

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

效果图：

重点：

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

2. 点击展开/关闭目录树

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

3. 源码

ul{
  list-style: none;
}
.color-indictor{
  display: inline-block;
  width: 20px;
  height: 20px;
  cursor: pointer;
}
.color-indictor.leaf-node{
  background: red;
}
.color-indictor.unexpand-node{
  background: green;
}
.color-indictor.expand-node{
  background-color: yellow;
}


  
  
Introduce: Click green block expand the menu tree
  
Red: Leaf node, can not click
  
Green: Unexpand node, click to expand menu
  
Yellow: Expanded node, click to unexpand menu
  
  

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