AngularJS Treeview занимает слишком много времени, чтобы загрузить

Question

У меня есть angularjs treeview, он отлично работает во всех отношениях, кроме времени загрузки с большими данными. В моем случае для загрузки дерева требуется не менее 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(); 
} 
]); 

Answer 1

H ere является примером директивы TreeView, где вы можете очень быстро загружать большие наборы данных: TreeView - Fast Load.

Вы можете загрузить тысячи предметов в миллисекундах почти мгновенно. С другой стороны, вы можете загружать данные по требованию непосредственно перед раскрытием древовидного объекта.