Carousel angular ui bootstrap 2.0.1

Question

我有一个angular-bootstrap 2.0.1的uib-carousel的问题。

我不明白发生了什么......我有角度引导2.0.0与图像和视频（视频指令）的滑块。一切都完美的工作，然后我maj到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

问题解决了！这只是bootstrap更新的兼容性问题（而不是我认为的angular-bootstrap）！ 降级到Bootstrap 3.3.7解决了问题！ ：D