我对角度引导程序2.0.1的uib-carousel有问题。
我不明白发生了什么......我有一个带有图像和视频的滑块（视频指令）的angular-bootstrap 2.0.0。一切都很完美，然后我到2.0.1然后，没有任何工作...即使我回滚到2.0.0 !!
问题是滑块不会改变幻灯片，也不会点击指示器，也不会等待计时器（由myInterval设置）。 你有什么想法吗？
这是我的HTML代码：
<div uib-carousel active = "dv.active" interval = "dv.myInterval" no-wrap = "dv.noWrapSlides" class = "carousel-container" >
<div uib-slide ng-repeat = "slide in dv.slides track by slide.slide_id" index = "slide.slide_id" >
<div ng-if = "!slide.isVideo" >
<img ng-src = "{{slide.slide_path}}" title = "{{slide.nom_slide}}"
alt = "{{slide.nom_slide}}" width = "360" height = "280" style = "margin:auto;" >
</div >
<div ng-if = "slide.isVideo" >
<div class = "videogular-container" >
<videogular vg-theme = "slide.theme.url" vg-update-state = "dv.startStopSlideshow()" >
<vg-media vg-src = "slide.source" ></vg-media >
<vg-controls class = "vg-controls" vg-autohide = "slide.plugins.controls.autoHide"
vg-autohide-time = "slide.plugins.controls.autoHideTime" >
<vg-play-pause-button ></vg-play-pause-button >
<vg-time-display >{{ currentTime | date:'mm:ss':'+0000' }}</vg-time-display >
<vg-scrub-bar >
<vg-scrub-bar-current-time ></vg-scrub-bar-current-time >
</vg-scrub-bar >
<vg-time-display >{{ timeLeft | date:'mm:ss':'+0000' }}</vg-time-display >
<vg-time-display >{{ totalTime | date:'mm:ss':'+0000' }}</vg-time-display >
<vg-volume >
<vg-mute-button ></vg-mute-button >
<vg-volume-bar ></vg-volume-bar >
</vg-volume >
<vg-fullscreen-button ></vg-fullscreen-button >
</vg-controls >
<vg-overlay-play class = "overlay-play" ></vg-overlay-play >
<vg-poster vg-url = 'slide.plugins.poster' ></vg-poster >
<vg-buffering ></vg-buffering >
</videogular >
</div >
</div >
</div >
</div >
<!-- Indicators -->
<ol class = "custom-carousel-indicators" ng-show = "dv.slides.length > 1" >
<li ng-repeat = "slide in dv.slides track by $index" ng-class = " { active: dv.isActive(slide) }"
ng-click = " dv.setActive($index)" >
<img ng-src = "{{slide.slide_path}}" alt = "{{slide.nom_slide}}" width = "120px" height = "93px" >
</li >
</ol >
这是我的JavaScript：
$q.all([
services.getAllVideosFromMaterielId(mat_id).then(
function(dataVideos)
{
var videos = dataVideos.data;
for (var j = 0; j < videos.length; j ++) {
var slide = {
source : [
{
src: "assets/videos/materiel/" + videos[j]['video_path'], type: "video/mp4"
}
],
theme : {
url: "bower_components/videogular-themes-default/videogular.css"
},
plugin : {
controls: {
autoHide : true,
autoHideTime: 5000
},
poster : "assets/videos/posters/" + videos[j]['video_path']
},
slide_id : vm.slides.length,
//Pour les vidéos, slide_path correspond au chemin vers le poster de la vidéo
slide_path: "assets/videos/posters/" + videos[j]['video_path'] + ".png",
nom_slide : videos[j]['nom_video'],
legende : "",
isVideo : true
};
vm.slides.push(slide);
}
}
),
services.getAllImagesFromMaterielId(mat_id).then(
function(dataImages)
{
var images = dataImages.data;
for (var j = 0; j < images.length; j ++) {
var slide = {
slide_id : vm.slides.length,
slide_path: "assets/images/materiel/" + images[j]['image_path'],
nom_slide : images[j]['nom_image'],
legende : images[j]['legende_image'],
isVideo : false
};
vm.slides.push(slide);
}
}
)
]).then(function()
{
vm.myInterval = 5000;
vm.startStopSlideshow = function()
{
if (vm.myInterval == 5000) {
vm.myInterval = 0;
} else {
vm.myInterval = 5000;
}
};
vm.noWrapSlides = false;
vm.active = 0;
vm.isActive = function(slide)
{
return vm.active === slide.slide_id;
};
vm.setActive = function(idx)
{
vm.active = idx;
vm.slides[idx].active = true;
};
vm.noMateriel = false;
})
}
else {
vm.noMateriel = true;
}
非常感谢您的帮助！
答案 0 :(得分：0)
问题解决了！这只是bootstrap更新的兼容性问题（而不像我想的那样是angular-bootstrap）！ 降级到Bootstrap 3.3.7解决了这个问题！ ：d