AngularJS Treeview需要花费太多时间来加载

Question

我正在使用angularjs树视图，除了大数据的加载时间外，它在各方面都运行良好。在我的情况下，加载树至少需要10秒，这显然是不可接受的。获取数据没有问题。我需要创建树的数据是以毫秒为单位，但树创建时间很长。我已经尝试了很少的东西，但没有成功。

现在，我想要的是，不是在第一次创建整个树时应该创建部分，例如最初只应显示父节点，当用户点击任何节点时，只有子节点应该创建父级。通过这种方式，我们可以减少我们最初提供的树模型的大小，从而也可以减少创建时间。但现在问题是我不知道该怎么做，因为无论我尝试过什么都行不通。如果有人对此有所了解，请帮助我。

如果还有其他方法可以减少时间，请告诉我。我只是想在几毫秒内加载它。

以下是HTML文件：

<div class="nowrap"
    style="height: 400px; overflow: scroll;">
    <div data-angular-treeview="true"
        data-tree-id="mytree"
         data-tree-model="roleList"
         data-node-id="id"
         data-node-label="name"
         data-node-children="children"
         my-event="selectNode"
         data-collapsed="true"
         data-search-query="treeSearchQuery">
    </div>
</div>

angular.treeview.js：

(function ( angular ) {
'use strict';

angular.module( 'angularTreeview', [] )
.directive( 'treeModel', ['$compile', function( $compile ) {
    return {
        restrict: 'A',
        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">
                         </i> ' +

                        '<span 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>';

            var event = attrs.myEvent;

            //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;
                    };

                    //if node label clicks,
                    scope[treeId].selectNodeLabel = scope[treeId].selectNodeLabel 
                         || function( selectedNode ){

                        //remove highlight from previous node
                        if( scope[treeId].currentNode 
                            && scope[treeId].currentNode.selected ) {
                            scope[treeId].currentNode.selected = undefined;
                        }

                        //set highlight to selected node
                        selectedNode.selected = 'selected';

                        //set currentNode
                        scope[treeId].currentNode = selectedNode;
                    };
                }

                //Rendering template.
                element.html('').append( $compile( template )( scope ) );
            }
        }
    };
}]);
})( angular );

控制器：

rsBaseApp.controller('cascadingTreeCtrl', [
'$scope','rsSiteServerTreeViewFactory', function ($scope,rsSiteServerTreeViewFactory) {

     $scope.getdata = function () {

         rsSiteServerTreeViewFactory.get(function (response) {
             $scope.roleList = response.data;         
         },
         function (errorInfo) {
             //alert("Some error occured");
         });
     }
     $scope.getdata();
}
]);