슬라이드 당 여러 항목이있는 부트 스트랩 회전 목마 및 AngularJS

Question

부트 스트랩을 사용하여 웹 사이트에 캐 러셀을 표시하고 슬라이드 당 여러 항목을 this example 다음에 표시합니다. 정적 이미지 사용은 완벽하게 잘 작동하며 결과에 대해 매우 만족합니다 (예 : this jsFiddle, ). 부 프레임의 미디어 쿼리로 인해 이상한 효과가 발생하지 않도록 디스플레이 프레임이 충분히 큰지 확인하십시오 (나중에을 처리합니다).

그러나 이제는 변수에서 회전식 슬라이드의 내용을 정의하고 ng-repeat 인 AngularJS로 바인딩하고 싶습니다. 그것이 문제가되는 곳입니다. 데이터는 올바르게 바인딩되지만 "활성"항목으로 간주되는 이미지 만 표시됩니다. 나는 그것이 이해가된다고 이해하지만 정적으로 정의 된 이미지로는 그렇게 행동하지 않았습니다. 내 버그를 보려면 this jsFiddle을 참조하십시오.

는 지금까지 시도하는 것 :

• 표시 모든 항목을 설정하고 오버 플로우 : 대신 클래스 COL-MD-4
를 사용
• 변경 항목 크기 % (33)에 모든 것을 표시 숨겨진,

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

해결책을 찾았습니다.

문제는 jQuery가 너무 빨리 실행되어 데이터를 바인딩하고 여러 디스플레이에 요소를 추가하기 전에 ng-repeat가 완료 될 때까지 기다리지 않는 것이 었습니다.

이 문제를 해결하기 위해 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-repeat에서 현재 요소의 인덱스를 가져오고 인덱스에서 데이터를 호출하도록 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를 사용하여 스크롤 막대없이 좌우로 스크롤 할 수 있습니다. 그런 식으로 숨기기 상태가 절대 없을 것입니다.