Bootstrap Karussell mit mehreren Elementen pro Folie und AngularJS

Question

Ich benutze Bootstrap, um ein Karussell auf meiner Website anzuzeigen, und ich zeige mehrere Elemente pro Folie nach this example. Die Verwendung von statischen Bildern funktioniert einwandfrei und ich bin sehr glücklich über die Ergebnisse (Beispiel auf this jsFiddle, stellen Sie sicher, dass der Anzeigerahmen groß genug ist, um einen seltsamen Effekt aufgrund der Medienanfragen von Boostrap zu vermeiden, die ich später kümmern werde).

Nun möchte ich jedoch den Inhalt des Karussells aus einer Variablen definieren und mit AngularJS mit einer ng-repeat binden. Hier tritt ein Problem auf. Die Daten werden ordnungsgemäß verknüpft, aber nur das Bild, das als "aktives" Element betrachtet wird, wird angezeigt. Ich verstehe, dass es Sinn macht, aber es verhält sich nicht so mit statisch definierten Bildern. Siehe this jsFiddle, um meinen Fehler zu sehen.

Was habe ich versucht, so weit:

• anzeigen Alle Artikel und stellen Überlauf:
• Ändern der Elemente Größe auf 33% versteckt und alles anzuzeigen, anstatt die Klasse col-md-4 der Verwendung

HTML

<div class="carousel-started-themes" style="height:150px; width:700px;"> 
    <div class="carousel slide" id="myCarousel"> 
    <div class="carousel-inner"> 
     <div class="item" ng-class="{active:!$index}" ng-repeat="img in image"> 
     <div class="col-md-4"><a href="#"><img ng-src="{{img}}" class="img-responsive"></a> 
     </div> 
     </div> 
    </div> 
    <a class="left carousel-control" href="#myCarousel" data-slide="prev" style="z-index:10000;"><i class="glyphicon glyphicon-chevron-left"></i></a> 
    <a class="right carousel-control" href="#myCarousel" data-slide="next" style="z-index:10000;"><i class="glyphicon glyphicon-chevron-right"></i></a> 
    </div> 
</div> 

JS

function MyCtrl($scope) { 
    $scope.image =["https://wallpaperscraft.com/image/minimalism_sky_clouds_sun_mountains_lake_landscape_95458_1600x900.jpg", "https://wallpaperscraft.com/image/clouds_milky_way_eclipse_light_68883_1600x900.jpg", "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSl5bsNT-Qtm0tfbydXFMuFCG27Kug6D5Z3hrgitIQqQq22Da95Ig", "https://wallpaper.wiki/wp-content/uploads/2017/05/Photos-1600x900-Wallpapers-HD.jpg", "https://wallpaperscraft.com/image/torzhok_tver_region_evening_sunset_river_reflection_autumn_russia_58028_1600x900.jpg", "https://wallpaper.wiki/wp-content/uploads/2017/04/wallpaper.wiki-1600x900-HD-Image-PIC-WPD0014727.jpg"]; 
} 

$('#myCarousel').carousel({ 
    interval: false 
}); 

$('.carousel .item').each(function() { 
    var next = $(this).next(); 
    if (!next.length) { 
    next = $(this).siblings(':first'); 
    } 
    next.children(':first-child').clone().appendTo($(this)); 

    if (next.next().length > 0) { 
    next.next().children(':first-child').clone().appendTo($(this)); 
    } else { 
    $(this).siblings(':first').children(':first-child').clone().appendTo($(this)); 
    } 
}); 

Answer 1

Ich fand die Lösung.

Das Problem war, dass jQuery zu schnell ausgeführt wurde und nicht darauf wartete, dass ng-repeat beendet wurde, bevor die Daten gebunden und die Elemente für die Mehrfachanzeige hinzugefügt wurden.

Ich verwendete the following callback directive, um das Problem zu lösen, und rief die jQuery-Methoden innerhalb der Callback-Funktion auf.

Die Richtlinie:

app.directive("repeatEnd", function(){ 
     return { 
      restrict: "A", 
      link: function (scope, element, attrs) { 
       if (scope.$last) { 
        scope.$eval(attrs.repeatEnd); 
       } 
      } 
     }; 
    }); 

Das nicht alles lösen. Es gibt immer noch ein Problem mit der angularen Bindung, die nicht angewendet wird, da die Elemente gebunden sind, nachdem die Wiederholung vorbei ist. Um dieses Problem zu umgehen, änderte ich den Code jQuery den Index des aktuellen Elements im ng-repeat zu bekommen, und meine Daten aus dem Index nennen:

$scope.repeatOver = function(){ 

     $('#myCarousel').carousel({ 
      interval: false 
     }); 

     $('.carousel .item').each(function(index){ 
      var next = $(this).next(); 
      var indexNext = index+1; 
      var indexNextNext = index+2; 
      if (!next.length) { 
      next = $(this).siblings(':first'); 
      indexNext = 0; 
      indexNextNext = 1; 
      } 
      next.children(':first-child').clone().appendTo($(this)); 
      // Change the source of the element 
      $(this).children(':first-child').next()[0].getElementsByTagName('img')[0].src = $scope.image[indexNext]; 

      if (next.next().length>0) { 
      next.next().children(':first-child').clone().appendTo($(this)); 
      // Change the source of the element 
      $(this).children(':first-child').next().next()[0].getElementsByTagName('img')[0].src = $scope.image[indexNextNext]; 
      } 
      else { 
      indexNextNext = 0; 
      $(this).siblings(':first').children(':first-child').clone().appendTo($(this)); 
      // Change the source of the element 
      $(this).children(':first-child').next().next()[0].getElementsByTagName('img')[0].src = $scope.image[indexNextNext]; 
      } 
     }); 
    } 

Answer 2

Warum brauchen Sie überhaupt/auszublenden zu zeigen? vielleicht könntest du einfach überlauf benutzen: versteckt; und benutze einfach jquery, um ohne Scrollbalken nach links und rechts zu scrollen. Auf diese Weise würde es niemals einen Versteck geben.