每张幻灯片和AngularJS带有多个项目的自举传送带
问题描述:
我正在使用Bootstrap在我的网站上显示传送带,并且在this example之后每张幻灯片显示多个项目。使用静态图像效果很好,我对结果感到非常高兴(例如this jsFiddle,确保显示帧足够大以避免由于boostrap的媒体查询造成的奇怪效果,我将在后面关注)。每张幻灯片和AngularJS带有多个项目的自举传送带
但是现在,我想从一个变量中定义轮播的内容,并使用一个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));
}
});
答
我找到了解决方案。
问题是,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);
}
}
};
});
这并不能解决所有问题。由于在重复结束后元素被绑定,所以角度绑定仍然存在问题。要解决此问题,我更改了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];
}
});
}
答
为什么你需要显示/隐藏呢?也许你可以使用overflow:hidden;并只需使用jquery左右滚动而不用滚动条。这样,就永远不会有隐藏条件。
我不确定我明白你的意思,因为我没有“显示或隐藏”任何东西,所以项目的活动状态是Bootstrap轮播的原生状态。我尝试手动显示一切和溢出:隐藏;但不幸的是,行为大致相同。 – Driblou