Angularjs 具有大数据量的递归角度指令

我有一个角度指令来生成嵌套列表结构。然而，当我得到大数据时，浏览器就会卡住&速度非常慢。如果只是ng repeat，我可以使用Limito，但这是一个递归模板。有什么建议吗

treeModule.directive（'tmTree'，function（）{
返回{
restrict:'E'，//告诉Angular仅将此应用于
replace:true，//告诉Angular用整个模板替换
范围：{
t:'=src',，
fetchChildren:“&fetchChildren”，
selectNode:'&selectNode'//创建一个独立的作用域变量't'并将'src'传递给它。
},    
控制器：功能（$scope）{
console.log（'aaa'）；
},
模板：“
”，
链接：函数（范围、元素、属性）{
}   
};
});
指令（'branch'，函数（$compile）{
返回{
restrict:'E'，//告诉Angular仅将此应用于
replace:true，//告诉Angular用整个模板替换
范围：{
b:'=src',，
fetchChildren:“&fetchChildren”，//创建一个独立的作用域变量“b”，并将“src”传递给它。
selectNode:“&selectNode”
},
控制器：函数（$scope$element）{
} ,   
模板：“
{{b.text}
”，
链接：函数（范围、元素、属性）{
////检查是否有子项，否则我们将执行无限执行
var有_children=angular.isArray（scope.b.children）；
var parent=scope.b；
////在DOM中操作HTML
如果（有子女）{
元素。追加（$compile（“”）（scope））；
//由于手动附加，请重新编译角度
//$compile（element.contents（））（范围）；
}
var chevronRight=angular.element（element.children（）[1]）；
chevronRight.on（'点击'）功能（事件）{
event.stopPropagation（）；
chevronRight.toggleClass（'glyphicon-chevron-right'）；
chevronRight.toggleClass（'glyphicon-chevron-down'）；
如果（有子女）{
元素toggleClass（'collapsed'）；
if（scope.b.children.length==0）{
}
}
});     
}
};
});

根据您发布的代码很难判断。但我的直觉是，您不应该使用如此多的jqLite引用，比如element和append。您应该使用ngRepeat（即

if（has_children）{element.append…

）和ngClick（即

chevronRight.on（'click'））在模板本身中处理更多此功能.jqLite操作非常昂贵。
根据您发布的代码很难判断。但我的直觉是，您不应该使用太多的jqLite引用，如element和append。您应该使用ngRepeat（即
if（has_children）{element.append…
）在模板本身中处理更多此功能和ngClick（即，
chevronRight.on（'click'…
）。jqLite操作非常昂贵

treeModule.directive('tmTree', function() {
  return {
    restrict: 'E', // tells Angular to apply this to only html tag that is <tree>
    replace: true, // tells Angular to replace <tree> by the whole template
    scope: {
      t: '=src',
      fetchChildren: '&fetchChildren',
      selectNode : '&selectNode' // create an isolated scope variable 't' and pass 'src' to it.  

    },    
    controller : function($scope){
      console.log('aaa');

    },
      template: '<ul><branch ng-repeat="c in t.children" src="c" fetch-children="fetchChildren()" select-Node="selectNode({node :child})"   ng-class="c.expandChildren ? \'\':\'collapsed\' "></branch></ul>' ,
    link: function(scope, element, attrs) {

    }   
  };
});

treeModule.directive('branch', function($compile) {
  return {
    restrict: 'E', // tells Angular to apply this to only html tag that is <branch>
    replace: true, // tells Angular to replace <branch> by the whole template
    scope: {
      b: '=src',
      fetchChildren: '&fetchChildren', // create an isolated scope variable 'b' and pass 'src' to it.  
      selectNode : '&selectNode'
    },
    controller : function($scope,$element){

    } ,   
      template: '<li class="treeNode"><div class="wholerow"></div><span id="chevron-right" class="glyphicon glyphicon-chevron-right" ></span><a ng-click="selectNode({child : b})">{{ b.text }}</a></li>',
    link: function(scope, element, attrs) {
      //// Check if there are any children, otherwise we'll have infinite execution

      var has_children = angular.isArray(scope.b.children);
      var parent = scope.b;
      //// Manipulate HTML in DOM
      if (has_children) {        
          element.append($compile( '<tm-tree src="b" fetch-children="fetchChildren()" select-Node="selectNode({node:child})" ></tm-tree>')(scope) );

        // recompile Angular because of manual appending
        //$compile(element.contents())(scope); 
      }
      var chevronRight = angular.element(element.children()[1]);

      chevronRight.on('click',function(event) {
         event.stopPropagation();
         chevronRight.toggleClass('glyphicon-chevron-right');
         chevronRight.toggleClass('glyphicon-chevron-down');
        if(has_children){
          element.toggleClass('collapsed');
            if(scope.b.children.length == 0) {

        }
      }
    });     
    }
  };

});