在 iDangerous swiper 幻灯片上使用 ng-repeat答案

【问题标题】：Using ng-repeat on iDangerous swiper slides在 iDangerous swiper 幻灯片上使用 ng-repeat
【发布时间】：2017-01-09 16:01:44
【问题描述】：

在我看来，在滑动幻灯片上使用 ng-repeat 会禁用在幻灯片中使用幻灯片的可能性。请参阅 JsFiddle link。它包含 4 张水平幻灯片，其中幻灯片 2 包含带有 2 张幻灯片的垂直幻灯片。它工作正常，但如果我更改 HTML

<!-- This works:-->
<div class="swiper-slide">

收件人：

<!-- This works:-->
<div class="swiper-slide" ng-repeat=”let in letArr”>

然后我得到（如预期的那样）5 张水平幻灯片，其中幻灯片 2 现在是两张幻灯片：幻灯片 2a 和 2b。但是我在幻灯片 2a 和 2b 上没有看到任何垂直幻灯片（这是我所期望的）。垂直幻灯片选择的分页项目符号可见，但没有响应。这只是按设计工作还是我错过了什么？

我可以在 HTML 中手动扩展我的外部幻灯片库，但这会使维护变得困难且容易出错。

【问题讨论】：

标签： html angularjs-ng-repeat swiper

【解决方案1】：

90% 的情况下，当我的滑块不工作，但在那里或部分工作（如构建分页按钮）时，一个简单的 swiper.reInit() 工作。

使用 angular，为了捕捉在 DOM 中创建最后一张幻灯片的时间，我制作了一个快速的 swiperSlide 指令并执行以下操作：

.directive('swiperSlide', function() {
    return function (scope, element, attrs) {
        if (scope.$last) setTimeout(function () {
            swiper.reInit(); //make sure you initialize your swiper to a variable called "swiper" or replace "swiper" with whatever your swiper variable is
        }, 1);
    };
});

【讨论】：