JSFiddle - React, Tailwind, and code Playground

by Jaeha Ahn

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",
                                    ...

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}" + 
               ...