AngularJS Visible Folder Structure (Tree View)

by mibrahim01

HTML

<html ng-app="treeExam" ng-controller="treeController">
    
    <head>
        <meta charset="utf-8">
        <title>Directive Example</title>
        <script src="http://code.angularjs.org/1.1.0/angular.min.js" type="text/javascript"></script>
        <script type="text/javascript" charset="utf-8">
            //어플리케이션 모듈을 선언하고, Directive를 인젝션한다.
            var directiveExam = angular.module('treeExam', ['euTree.directive']);

            directiveExam.controller('treeController', ['$scope', function($scope) {

                $scope.roleList = [{
                    "roleName": "User",
                        "roleId": "role1",
                        "children": [{
                        "roleName": "subUser1",
                            "roleId": "role11",
                            "children": []
                    }, {
                        "roleName": "subUser2",
                            "roleId": "role12",
                            "children": [{
                            "roleName": "subUser2-1",
                                "roleId": "role121",
                                "children": [{
                                "roleName": "subUser2-1-1",
                                    "roleId": "role1211",
                                    "children": []
                            }, {
                                "roleName": "subUser2-1-2",
                                    "roleId": "role1212",
                                    "children": []
                            }]
                        }]
                    }]
                }, {
                    "roleName": "Admin",
                        "roleId": "role2",
                        "children": []
                }];

            }]);
        </script>
    </head>
    
    <body>
       
        <eu-tree tree-data="roleList" node-id="roleId" node-name="roleName" node-state="expand" expand-icon="http://cfile23.uf.tistory.com/image/205B973A50C13F4B19D9BD"...

JavaScript

/*
 * Copyright (c) <2012> <AHN JAE-HA> 
 * 
 * version 0.0.1
 * angularJS Tree Menu
 * 
 */


angular.module('euTree.directive', [])
    .directive('treeElement', function ($compile) {
    return {
        restrict: 'E', //Element
        link: function (scope, element, attrs) {
            scope.tree = scope.node;

            var visibility = (attrs.nodeState != "collapse") || 'style="display: none;"';

            if (scope.tree.children.length) {
                for (var i in scope.tree.children) {
                    if (scope.tree.children[i].children.length) {
                        scope.tree.children[i].className = "eu_" + attrs.nodeState + " eu_deselected";
                    } else {
                        scope.tree.children[i].className = "eu_child" + " eu_deselected";
                    }
                }

                var template = angular.element('<ul ' + visibility + '><li ng-repeat="node in tree.children" node-id={{node.' + attrs.nodeId + '}} ng-class="node.className">{{node.' + attrs.nodeName + '}}<tree-element tree="node" node-id=' + attrs.nodeId + ' node-name=' + attrs.nodeName + ' node-state=' + attrs.nodeState + '></tree-element></li></ul>');

                var linkFunction = $compile(template);
                linkFunction(scope);
                element.replaceWith(template);
            } else {
                element.remove();
            }
        }
    };
})
    .directive('euTree', function ($compile) {
    return {
        restrict: 'E', //Element
        link: function (scope, element, attrs) {
            scope.selectedNode = null;

            //CSS for TREE
            var sheet = document.createElement('style')
            sheet.innerHTML =
                "eu-tree ul{margin:0;padding:0;list-style:none;border:none;overflow:hidden;text-decoration:none;color:#555}" +
                "eu-tree li{position:relative;padding:0 0 0 20px;font-size:13px;font-weight:initial;line-height:18px;cursor:pointer}" +
               ...