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

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

效果图：

重点：

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

{{item.name}}

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

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

3. 源码

angular.module("treeApp", [])

.controller("treeController", function($scope){

$scope.jsonData = {

name: 'menu',

children: [{

name: 'A',

children: [{

name: 'A.1',

children: [{

name: 'A.1.1',

children: []

}]

},{

name: 'A.2',

children: [{

name: 'A.2.1',

children: [{

name: 'A.2.1.1',

children: []

}]

},{

name: 'A.2.2',

children: []

}]

}]

},{

name: 'B',

children: [{

name: 'B.1',

children: []

},{

name: 'B.2',

children: []

}]

},{

name: 'C',

children: []

}]

};

}).directive('treeView', function(){

return {

restrict: 'E',

templateUrl: 'treeView.html',

scope: {

treeData: '='

},

controller: function($scope){

$scope.isLeaf = function(item){

return !item.children || !item.children.length;

};

$scope.toggleExpandStatus = function(item){

item.isExpand = !item.isExpand;

};

}

};

});

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

{{item.name}}

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