Question

我正在使用以下代码显示缩略图列表：

<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的过程中双重缓冲区或没有删除列表？

Answer 1

要与@ cexbrayat的答案一致，如果您没有任何ID，您也可以将其与track by $index相关联。这是ng-repeat期间的内部迭代＃。

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

Answer 2

您可以在track by中使用ng-repeat并使用唯一标识符。如果我认为你的频道对象有一个id，你可以这样做：

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

跟踪避免了每次更新时完整的DOM删除和重新创建，因为Angular将能够跟踪元素是否与以前相同并保留DOM元素。

Answer 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);禁用代码中元素的动画。

Answer 4

我遇到了同样的问题，使用$ index跟踪最终解决了我的问题。起初我并没有想到它，因为我直接在图像标签中使用它，而另一个ng-repeat是。一旦我把它放在父级div（以及ng-repeat）上就可以了：

at

Answer 5

作为说明：

如果使用track by $index并未使用新值更新DOM，则考虑使用track by 'the properties you expect to change'，请注意避免ngDupe错误

e.g：

<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">

角度ng重复导致闪烁

5 个答案: