I was trying to load a tree view inside div element of tabular type in Angular JS, but it is not loading the tree view instead it is showing a message as "[[object HTMLUListElement]]" in the UI with no error.
Below is the code for custom tree view:
companyMapControllers.directive("treeModel", ['$compile',function($compile) { return { restrict: "A", link: function(a, g, c) { var e = c.treeModel, h = c.nodeLabel || "label", d = c.nodeChildren || "children", k = '<ul><li data-ng-repeat="node in ' + e + '"><i class="collapsed" data-ng-show="node.' + d + '.length && node.collapsed" data-ng-click="selectNodeHead(node, $event)"></i><i class="expanded" data-ng-show="node.' + d + '.length && !node.collapsed" data-ng-click="selectNodeHead(node, $event)"></i><i class="normal" data-ng-hide="node.' + d + '.length"></i> <span data-ng-class="node.selected" data-ng-click="selectNodeLabel(node, $event)">{{node.' + h + '}}</span><div data-ng-hide="node.collapsed" data-tree-model="node.' + d + '" data-node-id=' + (c.nodeId || "id") + " data-node-label=" + h + " data-node-children=" + d + "></div></li></ul>"; e && e.length && (c.angularTreeview ? (a.$watch(e, function(m, b) { g.empty().html($compile(k)(a)) }, !1), a.selectNodeHead = a.selectNodeHead || function(a, b) { b.stopPropagation && b.stopPropagation(); b.preventDefault && b.preventDefault(); b.cancelBubble = !0; b.returnValue = !1; a.collapsed = !a.collapsed }, a.selectNodeLabel = a.selectNodeLabel || function(c, b) { b.stopPropagation && b.stopPropagation(); b.preventDefault && b.preventDefault(); b.cancelBubble = !0; b.returnValue = !1; a.currentNode && a.currentNode.selected && (a.currentNode.selected = void 0); c.selected = "selected"; a.currentNode = c }) : g.html($compile(k)(a))) } } }]) Tabular structure code is as follows :
<div> <section> <ul ng-init="tab = 1"> <li ng-class="{active:tab===1}"> <a href ng-click="tab = 1">Solutions</a> </li> <li ng-class="{active:tab===2}"> <a href ng-click="tab = 2">Company Map</a> </li> <li ng-class="{active:tab===3}"> <a href ng-click="tab = 3">Services</a> </li> <br><br> <p ng-show="tab === 1"> Solutions tab </p> <div ng-show="tab === 2"> <div data-angular-treeview="true" data-tree-model="roleList" data-node-id="roleId" data-node-label="roleName" data-node-children="children" > </div> </div> <p ng-show="tab === 3"> Services provided are displayed here </p> </ul> </section> </div> My CSS is :
p { font-size: 22px; font-weight: bold; font-style: italic; color: rgb(62, 62, 62); margin: 18px; } ul { float: left; height: 500px; width: 700px; border-radius: 5px; border: solid 1px rgb(198, 198, 198); padding: 7px 11px; background-color: rgb(248,248,248); } li { float: left; width: 175px; background-color: rgb(200,200,200); padding: 5px 19px; margin: 5px 2px 5px 0px; color: black; list-style: none; } li:hover, li:hover a { background-color: rgb(6,179,6); color:white; } li a { text-decoration: none; color: white; font-size: 21px; font-style: italic; text-shadow: 1px 0px 3px rgb(157, 157, 157); } li:nth-child(1) { border-radius: 4px 0px 0px 4px; margin-left: 1px;} li:nth-child(3) { border-radius: 0px 4px 4px 0px;} .active { background-color: rgb(6,179,6); } div[data-angular-treeview] { /* prevent user selection */ -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; /* default */ font-family: Tahoma; font-size:13px; color: #555; text-decoration: none; } div[data-tree-model] ul { margin: 0; padding: 0; list-style: none; border: none; overflow: hidden; } div[data-tree-model] li { position: relative; padding: 0 0 0 20px; line-height: 20px; } div[data-tree-model] li .expanded { padding: 1px 10px; background-image: "-"; background-repeat: no-repeat; } div[data-tree-model] li .collapsed { padding: 1px 10px; background-image: "+"; background-repeat: no-repeat; } div[data-tree-model] li .normal { padding: 1px 10px; background-image: "+"; background-repeat: no-repeat; } div[data-tree-model] li i, div[data-tree-model] li span { cursor: pointer; } div[data-tree-model] li .selected { background-color: #aaddff; font-weight: bold; padding: 1px 5px; } Data is as follows :
[ { "roleName": "Function1", "roleId":"role1", "children": [{"roleName":"Department1","roleId":"role11","children":[{"roleName":"Employee1","roleId":"role111"},{"roleName":"Employee2","roleId":"role112"}]}, {"roleName":"Department2","roleId":"role12","children":[{"roleName":"Employee3","roleId":"role121"},{"roleName":"Employee4","roleId":"role122"}]}] }, { "roleName": "Function2", "roleId":"role2", "children": [{"roleName":"Department3","roleId":"role21","children":[{"roleName":"Employee1","roleId":"role211"},{"roleName":"Employee2","roleId":"role212"}]}, {"roleName":"Department4","roleId":"role22","children":[{"roleName":"Employee3","roleId":"role221"},{"roleName":"Employee4","roleId":"role222"}]}] }, { "roleName": "Function3", "roleId":"role3", "children": [{"roleName":"Department5","roleId":"role31","children":[{"roleName":"Employee1","roleId":"role311"},{"roleName":"Employee2","roleId":"role312"}]}, {"roleName":"Department6","roleId":"role32","children":[{"roleName":"Employee3","roleId":"role321"},{"roleName":"Employee4","roleId":"role322"}]}] } ]
