Angularjs 如何展开默认的角度UI树节点

Angularjs 如何展开默认的角度UI树节点,angularjs,twitter-bootstrap,nodes,angular-ui-tree,Angularjs,Twitter Bootstrap,Nodes,Angular Ui Tree,我有以下标记: <div class="modal fade" id="locationSearchModal" tabindex="-1" role="dialog"> <div class="modal-dialog narrow-modal" role="document"> <div class="modal-content"> <div class="modal-header">

我有以下标记:

<div class="modal fade" id="locationSearchModal" tabindex="-1" role="dialog">
    <div class="modal-dialog narrow-modal" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Search for Locations</h4>
            </div>
            <div class="modal-body">
                <div class="tree-container">                  
                    <section>
                        <h2>Browse for Locations</h2>
                        <div ui-tree="" data-drag-enabled="false" id="tree-root">
                            <ul ui-tree-nodes="" ng-model="data">
                                <li ng-repeat="item in data" ui-tree-node="" collapsed="!item.ItemsRetrieved" ng-include="item.Place || item.$hashkey == undefined ? 'parent_items_renderer' : 'terminal_item_renderer' " ></li>
                            </ul>
                        </div>
                        <script type="text/ng-template" id="parent_items_renderer">
                            <div ui-tree-handle class="tree-node tree-node-content" ng-class="{'tree-node-open': !collapsed}" ng-click="toggle(item); convertObjs(item)">
                                <i class="fa fa-caret-right" ng-class="{'fa-caret-right': collapsed, 'fa-caret-down': !collapsed}"></i>
                                <i class="fa fa-map-marker" ng-class="{'text-blue': !collapsed}"></i>
                                <span class="" ng-bind-html="item.PlaceName"></span>
                            </div>
                            <ul ng-if="item.Place != null" ui-tree-nodes ng-model="item.Place" ng-class="{hidden: collapsed}">
                                <li ng-repeat="item in item.Place" ui-tree-node collapsed="!item.ItemsRetrieved" ng-include="item.Place ? 'parent_items_renderer' :  'terminal_item_renderer' "  on-finish-render="ngRepeatFinished"> </li>
                            </ul>

                        </script>
                        <script type="text/ng-template" id="terminal_item_renderer">
                            <div ui-tree-handle class="tree-node tree-node-content" ng-class="{'tree-node-open': !collapsed}" ng-click="addLocation(item)">
                                <a href title="Add Location"><span class="" ng-bind-html="item.PlaceName"></span></a>
                            </div>
                        </script>
                    </section>
                </div>
            </div>
        </div>
    </div>
</div>
当我从API获取JSON时,我需要处理数据以确保所有节点都是数组。我是这样做的:

$scope.processLocationNodes = function (nodes) {
        for (var node in nodes) {
            if (angular.isArray(node)) {
                $scope.processLocationNodes(node);
            } else {
                $scope.convertObjs(node);
            };
        }
    };

$scope.convertObjs = function (item) {

        angular.forEach(item.Place, function (items) {
            if (items != undefined && !angular.isString(items)) {
                if (items.Place && !angular.isArray(items.Place)) {
                    var PlaceObj = items.Place;
                    items.Place = [];
                    items.Place.push(PlaceObj);
                }
            }
        });
    };
现在,当显示模式时,数据将正确显示,树将按预期工作。唯一的问题是,我想将默认树扩展到用户默认位置的节点。我是按照以下逻辑来做的:

onFinishRender指令(调试代码表明命中该指令):

ngRepeatFinished功能如下所示:

$scope.$on('ngRepeatFinished', function (ngRepeatFinishedEvent) {
        var rootScope = $scope.getRootNodesScope();

        if (rootScope != undefined) {
            rootScope.collapseAll();
            $scope.expandNode($scope.defaultPlace);
        }
    });

$scope.getRootNodesScope = function() {
        return angular.element(document.getElementById("tree-root")).scope().$nodesScope.childNodes()[0];
    }

$scope.expandNode = function(nodeId) {

        // We need to get the whole path to the node to open all the nodes on the path
        var parentScopes = $scope.getScopePath(nodeId);

        for (var i = 0; i < parentScopes.length; i++) {
            parentScopes[i].expand();
        }

    };

$scope.getScopePath = function (nodeId) {
    return $scope.getScopePathIter(nodeId, $scope.getRootNodesScope(), []);
};

$scope.getScopePathIter = function(nodeId, scope, parentScopeList) {

        if (!scope) return null;

        var newParentScopeList = parentScopeList.slice();
        newParentScopeList.push(scope);

        if (scope.$modelValue && scope.$modelValue.id === nodeId) return newParentScopeList;

        var foundScopesPath = null;
        var childNodes = scope.childNodes();

        for (var i = 0; foundScopesPath === null && i < childNodes.length; i++) {
            foundScopesPath = $scope.getScopePathIter(nodeId, childNodes[i], newParentScopeList);
        }

        return foundScopesPath;
    };
$scope.$on('ngRepeatFinished',函数(ngRepeatFinishedEvent){
var rootScope=$scope.getRootNodesScope();
if(rootScope!=未定义){
collapseAll();
$scope.expandNode($scope.defaultPlace);
}
});
$scope.getRootNodeScope=function(){
返回angular.element(document.getElementById(“树根”)).scope().$nodesScope.childNodes()[0];
}
$scope.expandNode=函数(nodeId){
//我们需要获得节点的整个路径,以打开路径上的所有节点
var parentScopes=$scope.getScopePath(nodeId);
对于(var i=0;i
现在,我的问题是:

首先,在angular.element(document.getElementById(“树根”)).scope().$nodesScope.childNodes()[0]代码中,“childNodes()为空。根本不存在子节点。因此,代码没有可折叠或扩展的内容。我不知道为什么childNodes集合是空的

其次,一旦我弄明白了,我就可以看到特定节点的实际NodeId是什么,然后可以使用$scope.defaultPlace对象将树扩展到该节点


本质上,我只需要知道为什么childNodes集合是空的。

Hi…有人知道这个问题的答案吗??如果有,请告诉我。。
app.directive('onFinishRender', function ($timeout) {
    return {
        link: function (scope, element, attr) {
            if (scope.$last === true) {
                $timeout(function () {
                    scope.$emit(attr.onFinishRender);
                });
            }
        }
    }
});
$scope.$on('ngRepeatFinished', function (ngRepeatFinishedEvent) {
        var rootScope = $scope.getRootNodesScope();

        if (rootScope != undefined) {
            rootScope.collapseAll();
            $scope.expandNode($scope.defaultPlace);
        }
    });

$scope.getRootNodesScope = function() {
        return angular.element(document.getElementById("tree-root")).scope().$nodesScope.childNodes()[0];
    }

$scope.expandNode = function(nodeId) {

        // We need to get the whole path to the node to open all the nodes on the path
        var parentScopes = $scope.getScopePath(nodeId);

        for (var i = 0; i < parentScopes.length; i++) {
            parentScopes[i].expand();
        }

    };

$scope.getScopePath = function (nodeId) {
    return $scope.getScopePathIter(nodeId, $scope.getRootNodesScope(), []);
};

$scope.getScopePathIter = function(nodeId, scope, parentScopeList) {

        if (!scope) return null;

        var newParentScopeList = parentScopeList.slice();
        newParentScopeList.push(scope);

        if (scope.$modelValue && scope.$modelValue.id === nodeId) return newParentScopeList;

        var foundScopesPath = null;
        var childNodes = scope.childNodes();

        for (var i = 0; foundScopesPath === null && i < childNodes.length; i++) {
            foundScopesPath = $scope.getScopePathIter(nodeId, childNodes[i], newParentScopeList);
        }

        return foundScopesPath;
    };