将ng-if与指令一起使用会花费很多时间[缓慢]

Question

我有一个带有复选框的指令树列表视图，（由另一位开发人员开发），我想在用户单击按钮时将其显示给用户，因此我使用了ng-if / ng-show / ng-hide / ng-class隐藏。他们花费很多时间来显示指令（树列表），（然后超过20秒）

该指令使用ng-if，ng-repeat，ng-show ...

当我使用时：ng-if：可以加载1页2-缓慢单击按钮后显示树列表ng-hide / ng-show / ng-class隐藏：1页加载不好（速度太慢）2-点击按钮确定后显示树列表

对此问题有什么建议吗？

我的指令的模板是：

template: [
      '<div>',
        '<div>',
          '<span ivh-treeview-toggle="node">',
            '<span class="ivh-treeview-twistie">',
              '<span class="ivh-treeview-twistie-expanded">',
                ivhTreeviewOptions().twistieExpandedTpl,
              '</span>',
              '<span class="ivh-treeview-twistie-collapsed">',
                ivhTreeviewOptions().twistieCollapsedTpl,
              '</span>',
              '<span class="ivh-treeview-twistie-leaf">',
                ivhTreeviewOptions().twistieLeafTpl,
              '</span>',
            '</span>',
          '</span>',
          '<span ng-if="ctrl.useCheckboxes()"',
              'ivh-treeview-checkbox="node">',
          '</span>',
          '<span class="ivh-treeview-node-infos" ng-class="{\'billable\': ctrl.billable(node), \'associatedToUser\': ctrl.associatedToUser(node), \'hasAncestorAssociatedToUser\': ctrl.hasAncestorAssociatedToUser(node), \'nonClickable\': !ctrl.clickable(node)}" ivh-treeview-click>',
            '<span class="ivh-treeview-node-additionalInfo" ng-if="ctrl.showUserGroupUserCount()">',
              '<span ng-if="ctrl.userCount(node)" title="{{\'USERGROUP_USER_COUNT\' | translate}}" class="cursorHelp"><i class="fa fa-users fa-spr"></i>{{ctrl.userCount(node)}}</span>',
            '</span>',
            '<span class="ivh-treeview-node-additionalInfo" ng-if="ctrl.showRoleUserCount()">',
              '<span ng-if="ctrl.userCount(node)" title="{{\'ROLE_USER_COUNT\' | translate}}" class="cursorHelp"><i class="fa fa-users fa-spr"></i>{{ctrl.userCount(node)}}</span>',
            '</span>',
            '<span class="ivh-treeview-node-label">',
              '<span title="{{\'ROLE_ASSOCIATED_TO_USER\' | translate}}" class="cursorHelp labelIcon" ng-if="ctrl.associatedToUser(node)"><i class="fa fa-tag fa-spr"></i></span>',
              '<span title="{{\'USERGROUP_BILLABLE\' | translate}}" class="cursorHelp labelIcon" ng-if="ctrl.billable(node)"><i class="fa fa-credit-card fa-spr"></i></span>',
              '<span ng-if="ctrl.translate()">{{ctrl.label(node) | translate}}</span>',
              '<span ng-if="!ctrl.translate()">{{ctrl.label(node)}}</span>',
            '</span>',
            '<span class="ivh-treeview-node-description" ng-if="ctrl.showDescription()">',
              '{{ctrl.description(node)}}',
            '</span>',
          '</span>',
        '</div>',
        '<ul ng-if="getChildren().length" class="ivh-treeview">',
          '<li ng-repeat="child in getChildren()"',
              'ng-hide="ctrl.hasFilter() && !ctrl.isVisible(child)"',
              'ng-class="{\'ivh-treeview-node-collapsed\': !ctrl.isExpanded(child) && !ctrl.isLeaf(child)}"',
              'ivh-treeview-node="child"',
              'ivh-treeview-depth="childDepth">',
          '</li>',
        '</ul>',
      '</div>'
    ].join('\n')
  };
}])

Answer 1

由于缺少很多上下文，这可能会也可能无法帮助您。我想到两件事：

1。使用按表达式跟踪

[您应始终在ng-for循环中使用按表达式进行跟踪并处理大量数据，因此angular知道哪些元素是哪些，并且可以在更改时重用DOM元素以节省时间：

<li ng-repeat="child in getChildren() track by child.id
  ...

在这种情况下，我假设您的孩子具有唯一的“ id”属性，请选择您自己的唯一属性。

2。不要使用动态方法来生成子列表

[每次AngularJS运行更改检测周期时，都必须一次又一次地调用函数getChildren()。在几乎每种情况下，这都比在初始化时生成一次子级列表并将其写入范围变量要昂贵得多，该范围变量可以通过更改检测来进行检查，价格便宜得多。]