How can I display a treeview with an already selected node? - angularjs

Question

I'm using this slightly modified treeview directive (https://github.com/eu81273/angular.treeview, jFiddle Example) in my app. I can get it to save the node that has been selected, but I can't seem to figure out how to display the treeview with a node already selected, if the user edits previously saved form.
Treeview Directive:
angular.module('App').directive('treeModel', ['$compile', function ($compile) {
return {
restrict: 'A',
controller: treeviewController,
link: function (scope, element, attrs) {
//tree id
var treeId = attrs.treeId;
//tree model
var treeModel = attrs.treeModel;
//node id
var nodeId = attrs.nodeId || 'id';
//node label
var nodeLabel = attrs.nodeLabel || 'label';
//children
var nodeChildren = attrs.nodeChildren || 'children';
//tree template
var template =
'<ul>' +
'<li data-ng-repeat="node in ' + treeModel + '">' +
'<i class="collapsed" data-ng-show="node.' + nodeChildren + '.length && node.collapsed" data-ng-click="' + treeId + '.selectNodeHead(node)"></i>' +
'<i class="expanded" data-ng-show="node.' + nodeChildren + '.length && !node.collapsed" data-ng-click="' + treeId + '.selectNodeHead(node)"></i>' +
'<i class="normal" data-ng-hide="node.' + nodeChildren + '.length" data-ng-class="node.selected" data-ng-click="' + treeId + '.selectNodeLabel(node)"></i> ' +
'<span data-ng-hide="node.' + nodeChildren + '.length" class="tree-item" data-ng-class="node.selected" data-ng-click="' + treeId + '.selectNodeLabel(node)">{{node.' + nodeLabel + '}}</span>' +
'<span data-ng-show="node.' + nodeChildren + '.length" class="tree-node" data-ng-class="node.selected" data-ng-click="' + treeId + '.selectNodeLabel(node)">{{node.' + nodeLabel + '}}</span>' +
'<div data-ng-hide="node.collapsed" data-tree-id="' + treeId + '" data-tree-model="node.' + nodeChildren + '" data-node-id=' + nodeId + ' data-node-label=' + nodeLabel + ' data-node-children=' + nodeChildren + '></div>' +
'</li>' +
'</ul>';
//check tree id, tree model
if (treeId && treeModel) {
//root node
if (attrs.angularTreeview) {
//create tree object if not exists
scope[treeId] = scope[treeId] || {};
//if node head clicks,
scope[treeId].selectNodeHead = scope[treeId].selectNodeHead || function (selectedNode) {
//Collapse or Expand
selectedNode.collapsed = !selectedNode.collapsed;
};
// my attempt at pre-loading a selected node
if (scope.savedNode != undefined) {
scope[treeId].currentNode = scope.savedNode;
//scope.savedNode comes from the controller, and looks like this...
/*{
"children": [],
"collapsed": false,
"selected": "selected",
"treeNodeName": "Node name here",
"treeNodeId": "eY40Ik"
}*/
}
//if node label clicks,
scope[treeId].selectNodeLabel = scope[treeId].selectNodeLabel || function (selectedNode) {
// only allow to select nodes that are not expandable
if (!selectedNode.children.length) {
//remove highlight from previous node
if (scope[treeId].currentNode && scope[treeId].currentNode.selected) {
scope[treeId].currentNode.selected = undefined;
}
//toggle currentNode
if (scope[treeId].currentNode == selectedNode) {
scope[treeId].currentNode = {};
selectedNode = {};
scope.currentSelectedNode = {
name: "",
id: ""
};
} else {
scope[treeId].currentNode = selectedNode;
selectedNode.selected = 'selected';
scope.currentSelectedNode = {
name: selectedNode.sourceName,
id: selectedNode.sourceId
}
}
}
};
}
//Rendering template.
element.html('').append($compile(template)(scope));
}
}
};
}]);
HTML:
<div data-angular-treeview="true"
data-tree-id="treeId"
data-tree-model="treeData"
data-node-id="treeNodeId"
data-node-label="treeNodeName"
data-node-children="children">
</div>
Only the selected node is being saved, not the entire tree-model.
How would I load up a tree with a node already selected?