在 iDangerous 滑动器幻灯片上使用 ng 重复

Question

在我看来，在滑动幻灯片上使用ng-repeat会禁用在幻灯片中使用幻灯片的可能性。请参阅 JsFiddle 链接。它包含 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中手动展开我的外部幻灯片库，但这会使维护变得困难且容易出错。

Answer 1

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

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

.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);
    };
});