Carousel Angle UI Boots 2.0.1

Question

我对angular-bootstrap 2.0.1的uib传送带有疑问。

我不知道会发生什么...我有一个带有图像和视频滑块的angular-bootstrap 2.0.0（videogular指令）。 一切都工作正常，然后我就可以升级到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;
                }

非常感谢您的帮助！

Answer 1

问题解决了！ 这只是引导程序更新的兼容性问题（而不是我想的angular-bootstrap）！ 降级到Bootstrap 3.3.7解决了该问题！ ：D