如何显示具有已选择节点的树视图？

Question

我在我的应用程序中使用了这个经过稍微修改的treeview指令（https://github.com/eu81273/angular.treeview，jFiddle Example）。我可以得到它来保存已选择的节点，但是，如果用户编辑以前保存的表单，我似乎无法弄清楚如何显示已选择节点的树视图。

Treeview指令：

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>

仅保存选定的节点，而不保存整个树模型。

如何加载已选择节点的树？