Question

我使用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。更改滑块参数时，必须销毁并重新创建滑块实例。但是当刮水器实例被破坏时，最初由角度（即重复）创建的<img>元素也被破坏。

如何强制角度重新初始化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 事件发生在角度关注之外，因此可能发生在$ 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

所以回答你的问题

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

通常只需在范围上设置ng-repeat的集合值即可触发更改。在某些情况下你需要强迫它，然后你可以破解它（虽然我不建议它总是）：

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

如何重新初始化ng-repeat

1 个答案:

编辑（附加结果）

所以回答你的问题