angular-bootstrap-nav-tree 插件的应用 abntree

是一个应用angular，bootstrap框架的项目，而且有要用到树的地方，然后就在github上面查找相关的插件，，最后找到了abntree,

 

因为是在项目中用到的，所以可能和你们的环境有所差异，仅做参考；

引入两个文件：abn-tree.css文件和abn_tree_directive.js文件；

由于我的是angulat项目，所以还需要在module中引入“angularBootstrapNavTree”，

准备工作完毕；

首先在html页面中加入：

  <abn-tree 
    icon-collapse="icon iconfont icon-less" 
    icon-leaf = "icon iconfont icon-shangcheng"
    icon-expand="icon iconfont icon-moreunfold" 
    tree-data="my_data" 
    on-select = "vm.my_tree_handle(branch)">
  </abn-tree>

参数解读：

1、tree-data 属性是需要展示的树的数据，当然数据的格式，和参数有着规定，my_data要是数组，里面的数据必须是，父包子，具体格式，请参考，官网上面的例子，(tips:children和label一定要) ；

2、icon-collapse属性是父节点合起来的时候节点的图片，我在这里应用的是iconfont里面的图片，icon-collapse和icon-expand都是图片，如果不加也可以，但是默认的图片是有点丑的；

3、icon-expand属性是父节点展开的时候节点的图片；

3、on-select属性是的是你点击是触发的事件，可能是查询数据之类的事件，

如果你觉得树的样式比较丑的话，可以加上一个artical标签应用css的权值来对原来的样式进行覆盖也是可以的；