1つのスライドに複数のアイテムがあるブートストラップカルーセルとAngularJS

Question

私はウェブサイトにカルーセルを表示するためにブートストラップを使用していますが、this exampleに続いてスライドごとにいくつかのアイテムを表示します。静的画像を使用すると完全にうまく動作します（例：this jsFiddle、の例では、後でを処理するために、表示フレームがboostrapのメディアクエリによる不思議な効果を避けるのに十分な大きさであることを確認してください）。

しかし、私は変数からカルーセルのコンテンツを定義し、ng-repeatでAngularJSでバインドしたいと思います。そこに問題が発生します。データは正しくバインドされていますが、「アクティブ」項目と見なされる画像のみが表示されます。それは理にかなっていることを理解していますが、静的に定義された画像ではそのように振る舞いませんでした。私のバグを見るにはthis jsFiddleを参照してください。

• 表示し、すべての項目と設定オーバーフロー：隠された
• 変更アイテムが33％にサイズ、すべてを表示する代わりに、クラスCOL-MD-4
を使用しての私がこれまで試したどのような

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

解決策が見つかりました。

問題は、データをバインドして複数の表示用に要素を追加する前に、ng-repeatが終了するのを待たずに、jQueryが高速に実行されていたことです。

私はこの問題を解決するためにthe following callback directiveを使用し、コールバック関数内でjQueryメソッドを呼び出しました。

ディレクティブ：

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

これがすべてを解決していません。反復が終了した後に要素がバインドされるため、角綴じが適用されない問題はまだあります。この問題を回避するには、私はNG-繰り返しで現在の要素のインデックスを取得し、インデックスから自分のデータを呼び出すためにjQueryのコードを変更：

$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

は、なぜあなたはすべてで/非表示を表示する必要がありますか？おそらくあなたは単にオーバーフローを使うことができます：隠された; jqueryを使用してスクロールバーを使わずに左右にスクロールするだけです。そうすれば、非表示条件は決してありません。