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"}]}]
}
]
