Использование ng-if с директивой занимает много времени [Медленно] - PullRequest
Новая
       27

Использование ng-if с директивой занимает много времени [Медленно]

0 голосов
/ 29 октября 2019

У меня есть представление списка дерева директив с флажками, (aleardy разработано другим разработчиком), я хочу показать его пользователю, когда он нажимает на кнопку, поэтому я использовал ng-if / ng-show / ng-hide/ нг-класс со скрытым. на отображение директивы (списка деревьев) уходит много времени (более 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')
  };
}])

1 Ответ

0 голосов
/ 29 октября 2019

Так как отсутствует много контекста, это может или не может помочь вам. Две вещи приходят мне на ум:

1. Использовать дорожку по выражению

Вы всегда должны использовать дорожку по выражению в ng-for циклах с большим количеством данных, поэтому angular знает, какие элементы есть какие, и может повторно использовать DOM-элементы для изменений, чтобы сэкономить время: 

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

В этом случае я предполагаю, что у ваших детей есть уникальное свойство "id", выберите свое уникальное свойство.

2. Не используйте динамический метод для создания дочерних списков

Каждый раз, когда AngularJS запускает цикл обнаружения изменений, он должен будет снова и снова вызывать вашу функцию getChildren(). Почти в каждом случае это дороже, чем создание дочернего списка при инициализации и запись его в переменную области видимости, которая может быть проверена обнаружением изменений гораздо дешевле.

...