Закрытие модального окна в Angular UI Bootstrap при стирании массива из 1000 элементов занимает значительное время

У меня есть приложение Angular, в котором я передаю пустой массив в Modal Angular-UI Bootstrap. В зависимости от выбора пользователя он может быть заполнен или не заполнен элементами, до 1000 объектов. Всех их отображаю в списке с ng-repeat. Все элементы в списке предварительно сгенерированы, поэтому я не могу получить их асинхронно, например, с помощью плагина типа смарт-таблица. Когда пользователь нажимает кнопку ok, все сгенерированные значения возвращаются к controller, откуда он был вызван. Технически все они уже есть, потому что я передаю $scope.items по ссылке:

resolve: {
        items: function () {
          return $scope.items;
        }
      }

Но когда я нажимаю кнопку отмена, я стираю все элементы в массиве, вызывая $scope.items.length=0; Моя проблема в том, что это занимает некоторое время. В моем примере с плункером ниже это едва заметно, но заметно, но в моем реальном приложении это гораздо более заметно и неприемлемо.

Я предполагаю, что это связано с двусторонней привязкой Angular, для очистки всех наблюдателей требуется время, но я не знаю, как решить эту проблему, если ее можно решить.

Мой MCVE в plunker здесь: http://plnkr.co/edit/JwanDxBzh3a7ilEX58z8?p=preview< /а>

ОБНОВЛЕНИЕ. Пытался использовать однократное связывание, plunker здесь: http://plnkr.co/edit/PjzHRYiuXFHE1M1Pap6U?p=preview

  <li ng-repeat="item in items">
                <a href="#"> {{ ::item | date:'yyyy-MM-dd' }}</a>
            </li>

как описано здесь: https://stackoverflow.com/a/18791503/947111 это не помогло.


angularjs angularjs-ng-repeat angular-ui-bootstrap angularjs-bindings
person Anatoly    schedule 03.02.2016    source источник
comment
Вы делаете что-то более сложное, чем это, в своем реальном модальном окне? Как, например, выполнение $watch внутри директивы, отслеживающей каждый элемент?   -  person Amy Blankenship    schedule 03.02.2016
comment
Нет, но я решил свою проблему. Я неправильно использовал одноразовую привязку с ng-repeat, см. мой ответ ниже.   -  person Anatoly    schedule 03.02.2016

Ответы (1)


arrow_upward
1
arrow_downward

Хорошо, я был прав, и я был почти готов с Angular one-time binding, я просто использовал его не в том месте, и его следует использовать в ng-repeat таким образом:

 <li ng-repeat="item in ::items">
                    <a href="#"> {{::item | date:'yyyy-MM-dd' }}</a>
                </li>

Благодаря этому ответу: https://stackoverflow.com/a/23903690/947111

Рабочий плункер находится здесь: http://plnkr.co/edit/XWi6Z0eCXveV58WJfpo6?p=preview

person Anatoly    schedule 03.02.2016