Karussell angular ui bootstrap 2.0.1

Question

Ich habe ein Problem mit dem uib-Karussell von angular-bootstrap 2.0.1.

Ich verstehe nicht, was passiert ... Ich hatte angular-bootstrap 2.0.0 mit einem Schieberegler mit Bildern und Videos (Video-Direktiven). Alles hat perfekt funktioniert, dann habe ich mich an 2.0.1 gewöhnt und da funktioniert nix ... Auch wenn ich auf 2.0.0 zurückroll !!

Das Problem ist, dass der Schieberegler Schieber nicht ändert, noch wenn ich auf die Indikatoren klicke, noch wenn ich auf den Timer (eingestellt von myInterval) warte. Haben Sie eine Idee?

Hier ist mein HTML-Code:

<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 > 

Und hier ist mein 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; 
       } 

Vielen Dank für die Hilfe!

Answer 1

Problem gelöst! Es war nur ein Kompatibilitätsproblem mit dem Update des Bootstrap (und nicht angular-Bootstrap, wie ich dachte)! Downgrade auf Bootstrap 3.3.7 löste das Problem! : D