Angularjs树形结构指令:angular-ivh-treeview的使用

angular-ivh-treeview是一个可以呈现树形结构的Angularjs第三方插件，最近一个项目中需要呈现一个目录的树形结构，就发现了这个插件，使用下来感觉功能还是蛮齐备的，所以在此记录下使用的一些心得。

GitHub地址: https://github.com/ivantage/angular-ivh-treeview 

插件主页: http://ivantage.github.io/angular-ivh-treeview

其实Github上的使用说明已经很详尽，我在这里也不会重复的每个功能的使用都讲一遍，只是以一个使用的实例来说明如何使用它。

安装

在网站上下载Release版本后，解压缩完毕后，添加到项目的js相关的目录

文件目录

然后在页面内加入css和js的引用

在需要使用树形结构的页面中插入如下的标签

只要

就可以显示树形结构了，其他属性后面会详细介绍

在需要使用树形结构的Controller中添加依赖

Ok，这样ivhtreeview基本就配置完毕了。

树形结构数据准备

前端的架子搭起来了，我们就需要在后端准备数据了。我们以生成一个Git的代码目录结构为例。我们需要遍历某个目录，最先想到的肯定是递归遍历，如下代码

我们先创建一个FileInfo的实体类，用于表示文件夹或文件

递归遍历目录

这样我们就得到了一个FileInfo类型的对象,它影射的Json格式大概就这个样子：

最后，只要把后台生成的数据返回给前端显示就可以了。