如何重新初始化 ng-repeat

Question

我有一个 angular 应用程序使用 iDangerous Swiper 和以下 html:

<div ng-repeat="slide in slides">
  <img src="{{slide.url}}" />
</div>

和 JS

$scope.slides = [{url: 'myimage1.jpg'},{url: 'myimage2.jpg'}];

Swiper 库控制 DOM。更改 swiper 参数时，必须销毁并重新创建 swiper 实例。但是当 wiper 实例被销毁时，最初由 angular 创建（即重复）的 <img> 元素也被销毁。

如何强制 angular 重新初始化 ng-repeat（即再次加载 <img> 元素）？

Answer 1

前言 - 我不熟悉 Swiper 或 iDangerous，所以我不完全确定你如何称呼它

我在此处通过刷卡文档找到了 onDestroy 回调 - http://www.idangero.us/swiper/api/#.VpVBo5MrJE4

你应该可以这样做：

var swiper = new Swiper( ... )
swiper.onDestroy( function....

//or

swiper.on( 'destroy', function(){ 
    $scope.$apply( function() {
        $scope.slides = []; //or whatever you want to do here
    }
});

我建议 $scope.$apply 的原因是因为滑动 destroy 事件发生在 angular 的关注范围之外，因此可能会发生 within/outside 的 $digest 循环。这可能是必要的，也可能不是必要的。

编辑（补充调查结果）

所以我在解决这个问题时发现的一件事是，当您使用 $scope.params 初始化您的 mySwiper 实例时，它实际上会向该对象添加额外的值。当你去重用它时，它处于 Swiper 不满意的状态，并且会抛出错误。因此，简单的解决方法是复制 $scope.params 对象并将其传递给 getSwiper 方法。

function getSwiper(){
    var p = angular.copy($scope.params)
    var s = new Swiper('.swiper-container', p)

    return s;
}

https://codepen.io/jusopi/pen/VezwVP/?editors=001

所以回答你的问题

How do I force angular to re-initialize the ng-repeat (i.e. load the elements again) ?

通常只需在范围上设置 ng-repeat 的 collection 值即可触发更改。在某些情况下你需要强制执行此操作，然后你可以破解它（尽管我并不总是推荐它）：

var orig = $scope.slides;
$scope.slides = []; //triggers a $digest
$scope.slides = orig;

如何重新初始化 ng-repeat

How to reinitialize ng-repeat

angularjs

swiper

编辑（补充调查结果）

所以回答你的问题