Angularjs 将ng if与指令一起使用需要很多时间[缓慢]

我有一个带有复选框的指令树列表视图（aleardy由另一个开发人员开发），我想在用户单击按钮时将其显示给用户，因此我使用了ng if/ng show/ng hide/ng class with hidden。它们需要花费大量时间来显示指令（树列表），（超过20秒）

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

当我使用： 如果： 1-页面加载正常 2-单击按钮后缓慢显示树列表 ng隐藏/ng显示/ng隐藏类： 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')
  };
}])

模板：[
'',
'',
'',
'',
'',
ivhTreeviewOptions（）.twistieExpandedTpl，
'',
'',
ivhTreeviewOptions（）.twistieCollapsedTpl，
'',
'',
ivhTreeviewOptions（）.twistieLeafTpl，
'',
'',
'',
'',
'',
'',
'',
“{ctrl.userCount（节点）}}”，
'',
'',
“{ctrl.userCount（节点）}}”，
'',
'',
'',
'',
“{ctrl.label（node）| translate}}”，
“{ctrl.label（node）}}”，
'',
'',
“{ctrl.description（node）}}”，
'',
'',
'',
“
”，
“
”，
“
”，
“
”，
''
].join（“\n”）
};
}])

由于缺少大量上下文，这可能会帮助您，也可能不会帮助您。我想到两件事：

1.使用“按表达式跟踪” 对于包含大量数据的-循环，应始终使用

ng中的track by expression，以便angular知道哪些元素是哪些元素，并且可以在更改时重用DOM元素以节省时间：

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

您好，该指令是由另一位开发人员开发的，您能帮忙吗？我试图通过…添加曲目。。。但这里没有任何更改代码：