使用带有指令的 ng-if 需要很多时间 [慢慢地]

Question

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

指令使用 ng-if、ng-repeat、ng-show...

当我使用： ng-如果： 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-loops 中使用包含大量数据的跟踪表达式，以便 Angular 知道哪些元素是哪些元素，并且可以在更改时重用 DOM 元素以节省时间：

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

在这种情况下，我假设您的孩子有一个独特的“id”属性，请选择您的独特属性。

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

每次 AngularJS 运行一个变化检测周期，它都必须一遍又一遍地调用你的函数getChildren()。几乎在所有情况下，这都比在初始化时生成一个子列表并将其写入一个可以由更改检测检查的范围变量更便宜。