Angular ng-repeat вызывает мерцание

Я показываю список миниатюр с этим кодом:

<div class ="channel" ng-repeat ="channel in UIModel.channels" ng-class ="{evenchannel: ($index % 2) == 0, oddchannel: ($index % 2) == 1}">
            <img class="channel-img" ng-src ="data/channels/{{$index + 1}}/thumb"/>
</div>

В контроллере у меня есть запрос ajax, который захватывает новые уменьшенные изображения. Angular таким образом обновляет изображения, но вызывает мерцание. Есть ли способ удвоить буфер или не удалить список в процессе обновления DOM?

Ответы

Ответ 1

Чтобы выполнить ответ @cexbrayat, если у вас нет идентификаторов, вы также можете просто связать его и track by $index. Это внутренняя итерация # во время ng-repeat.

<div ng-repeat="channel in UIModel.channels track by $index"></div>

Ответ 2

Вы можете использовать track by в своем ng-repeat с уникальным идентификатором. Если я полагаю, что ваш объект канала имеет идентификатор, вы можете сделать:

<div class ="channel" ng-repeat="channel in UIModel.channels track by channel.id"></div>

Отслеживание позволяет избежать полного удаления DOM и рекреации при каждом обновлении, так как Angular сможет отслеживать, является ли элемент тем же, что и ранее, и сохранит элемент DOM.

Ответ 3

Сначала попробуйте ответы от @Mark Pieszak и @cexbrayat, однако если вы используете ngAnimate в своем приложении, они могут не полностью решить вашу проблему.

В дополнение к:

<div class="channel" ng-repeat="channel in UIModel.channels track by channel.id"></div>

Мне нужно было добавить следующий CSS для отключения анимации для этого ng-repeat:

.channel .ng-leave, .channel .ng-leave-active {
    display: none !important;
}

.channel .ng-move, .channel .ng-move-active {
    display: none !important;
}

Это гарантирует, что после начала анимации элемент сразу будет скрыт. Альтернативы - фактически использовать анимацию или отключить анимацию элемента в коде с помощью $animate.enabled('div.channel', false);.

Ответ 4

У меня была такая же проблема, используя трек по $index, наконец, разрешил проблему для меня. Сначала я не думал, что это так, потому что я использовал его непосредственно в тегах изображений, где был еще один ng-repeat. Как только я положил его в родительский div (также) на ng-repeat, он сработал:

<div ng-repeat="item in blah track by $index">
   <!-- stuff -->
   <!-- later in this div: -->
   <img data-ng-repeat="dict in item.blah track by $index" class="smallPics ng-cloak" src="{[dict.path]}"></img>

   <!-- and the rest is blah-istory -->

Ответ 5

Как примечание:

Если использование track by $index не обновляет DOM с новыми значениями,
рассмотрите возможность использования track by 'the properties you expect to change', просто будьте осторожны, чтобы избежать ошибок ngDupe

например:

<div ng-repeat="channel in UIModel.channels track by customExp(channel)">

. , .

$scope.customExp = function(chan) {
    return chan.id+chan.thumbnail_url; // this has to ensure uniqueness
}

или

<div ng-repeat="channel in UIModel.channels track by channel.id+channel.thubnail_url">