Question

我使用Bootstrap在我的网站上显示轮播，我在this example之后每张幻灯片显示几个项目。使用静态图像效果非常好，我对结果感到非常满意（例如this jsFiddle，确保显示框大到足以避免由于boostrap的媒体造成的奇怪影响查询，我将在稍后处理）。

但是现在，我想从变量中定义轮播的内容，并使用ng-repeat将其与AngularJS绑定。那就是问题发生的地方。数据被正确绑定，但只有图像被视为＆＃34;活动＆＃34;项目显示。我理解这是有道理的，但它并不像静态定义的图像那样表现。请参阅this jsFiddle以查看我的错误。

到目前为止我尝试了什么：

显示所有项目并设置overflow：hidden
将项目大小更改为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

为什么你需要显示/隐藏？也许你可以使用overflow：hidden;并且只使用jquery在没有滚动条的情况下向左和向右滚动。这样，永远不会有隐藏条件。

Answer 2

我找到了解决方案。

问题是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);
                }
            }
        };
    });

这并不能解决所有问题。由于元素在重复结束后被绑定，因此仍然存在未应用Angular绑定的问题。为了解决这个问题，我更改了jQuery代码以获取ng-repeat中当前元素的索引，并从索引中调用我的数据：

$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];
          }
        });
    }

每个幻灯片和AngularJS有多个项目的Bootstrap轮播

2 个答案: