使用 Angular 的 Bootstrap UI,我需要收集正在显示的幻灯片的索引,然后我可以使用它来收集数据,以便在单独的容器中显示内容。
按照这个确切的example我可以记录幻灯片的索引。当我在自己的环境中复制它时,它就起作用了。
我遇到的问题是我已将轮播插入到 Bootstrap UI 提供的 tabset
中,如下所示:
<uib-tabset active="activePhaseTab" type="pills">
<uib-tab heading="Blue" index="3" ng-click="$ctrl.phaseSlide = 3;$ctrl.phaseSliderInfo($ctrl.phaseSlide)">
<div style="height: 305px">
<div uib-carousel active="activeSlide" interval="myInterval" no-wrap="noWrapSlides">
<div uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id">
<img ng-src="{{slide.image}}" style="margin:auto;">
<div class="carousel-caption">
<h4>Slide {{slide.id}}</h4>
<p>{{slide.text}}</p>
</div>
</div>
</div>
</div>
</uib-tab>
</uib-tabset>
如果没有将轮播封装在选项卡中,我可以在 activeSlide
上使用 $watch
方法,但现在轮播位于选项卡内,它失败了这样做。
问题
如何$监视选项卡集中“activeSlide”的变化?
$scope.myInterval = 3000;
$scope.noWrapSlides = false;
var slides = $scope.slides = [];
var currIndex = 0;
$scope.addSlide = function() {
var newWidth = 600 + slides.length + 1;
slides.push({
image: '//unsplash.it/' + newWidth + '/300',
text: ['Nice image','Awesome photograph','That is so cool','I love that'][slides.length % 4],
id: currIndex++
});
};
for (var i = 0; i < 4; i++) {
$scope.addSlide();
}
$scope.$watch('activeSlide', function (active) { //SHOULD LOG THE ACTIVE SLIDE
if(active !== undefined) {
console.log(active)
console.log('slide ' + active + ' is active');
}
});
最佳答案
您的初始 plunker 链接有这个奇怪的语法错误,因此我使用 Bootstrap UI 示例制作了另一个链接。
我适合选项卡集药丸演示中的轮播演示。$scope.$watch('activeSlide'...
确实失败了。但幸运的是,这个特定场景已经在 stackoverflow question 中得到了回答。
所以我只是听从了他们的建议并尝试了他们的指令。现在,每张幻灯片的更改都由 on-carousel-change="onSlideChanged(nextSlide, Direction)"
监控。您可以检查下面的 plunker 控制台并随心所欲地使用它。
这是 plunker
希望有帮助!
关于javascript - Bootstrap UI 轮播功能不会在选项卡内运行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46199125/