Angularjs 如何在不改变业务逻辑的情况下优化具有数千个节点的文档视图？

我的旧版angular 1.2.30应用程序存在性能问题。它的主要组件是一个递归调用自身以显示树节点的指令

这棵树随着时间的推移而增长，它有数千个节点。因为这棵树太大了，所以没有必要把它完全展示出来。用户会很高兴在树中有一个移动窗口。这看起来是一个非常常见的问题，但我很难找到一个共同的解决方案

---

不过，我宁愿避免修改棘手的商业逻辑。有没有办法只显示模型的一部分？

我有一个非常类似的场景来显示导航树。使用递归模板和

ng if

处理子节点的渲染。默认情况下，渲染树时所有节点都已折叠，仅显示根节点。子节点仅在父节点展开时渲染

基本代码如下所示：

<ul class="tree-list">
    <li ng-repeat="child in rootList" ng-include="'navigation_tree.html'" ng-class="{ 'treeOpen': child.Open && child.Children.length > 0, 'treeClose': !child.Open && child.Children.length > 0 }"></li>
</ul>

<script type="text/ng-template" id="navigation_tree.html">
    <span class="tree-icon">
        <a ng-click="child.EnableDetails = true; child.Open = !child.Open;">
            <img ng-src="arrow.png" />
        </a>
    </span>
    <span>{{child.DisplayName}}</span>
    <ul ng-if="child.EnableDetails">
        <li ng-repeat="child in child.Children" ng-include="'navigation_tree.html'" ng-class="{ 'treeOpen': child.Open && child.Children.length > 0, 'treeClose': !child.Open && child.Children.length > 0 }"></li>
    </ul>
</script>

请注意，它首先将

EnableDetails

属性设置为

true

，然后切换打开/展开状态。因此，第一次单击节点时，除了设置其展开状态外，还将设置属性以允许渲染其子节点

<ul ng-if="child.EnableDetails">

<a ng-click="child.EnableDetails = true; child.Open = !child.Open; ">