如何重新初始化 ng-repeat

Question

我有一个使用 iDangerous Swiper 和以下 html 的 Angular 应用程序：

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

和 JS

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

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

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

Answer 1

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

我通过此处的 swiper 文档找到了 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 的原因是因为 swiper destroy 事件发生在 angular 之外，因此可能发生在 $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

所以回答你的问题

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

通常只需在作用域上设置ng-repeat 的collection 值即可触发更改。在某些情况下你需要强制这样做，然后你可以破解它（虽然我并不总是推荐它）：

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