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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/angular.js"></script>
</head>
<script>
    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;
                };
            }
        };
    });
</script>
<style>
    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;
    }
</style>
<body ng-app="treeApp" ng-controller="treeController">
<div>
    <p>Introduce: Click green block expand the menu tree</p>
    <p>Red: Leaf node, can not click</p>
    <p>Green: Unexpand node, click to expand menu</p>
    <p>Yellow: Expanded node, click to unexpand menu</p>
</div>
<tree-view tree-data="jsonData"></tree-view>
</body>

<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>
</html>

　　

posted @ 2017-05-26 22:15  时间脱臼  阅读(278)  评论(0)    收藏  举报