0

I have a directive tree list view with checks box, (aleardy developed by another developer), i want to display it to the user when he clicks on button, so i used ng-if/ng-show/ng-hide/ng-class with hidden. they takes a lot of time to display the directive (tree list), (more then 20sec)

the directive use ng-if, ng-repeat, ng-show...

When i use: ng-if: 1- page loading is ok 2- display tree list after click button is slowly ng-hide/ng-show/ng-class with hidden: 1- page loading is noy ok (too slowly) 2- display tree list after click button is OK

any advices for this problem ?

the template of my directive is:

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')
  };
}])
4

1 回答 1

0

由于缺少很多上下文，这可能对您有所帮助，也可能对您没有帮助。我想到了两件事：

1.按表达使用跟踪

您应该始终在ng-for具有大量数据的 -loops 中使用表达式跟踪，因此 Angular 知道哪些元素是哪些元素，并且可以在更改时重用 DOM 元素以节省时间：

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

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

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

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

于 2019-10-29T16:13:15.850 回答