angularjs ng-repeat的猫头鹰轮播问题答案

【问题标题】：owl-carousel issue with angularjs ng-repeatangularjs ng-repeat的猫头鹰轮播问题
【发布时间】：2016-06-19 15:24:05
【问题描述】：

请我使用 owl-carousel 作为我的旋转木马。我的轮播与http://thebootstrapthemes.com/live/thebootstrapthemes-zenclassified/ 的轮播非常相似。我遇到了类似的解决方案 Here 和 Here 。然后我在下面的控制器中添加了一个类似的指令。

.directive('owlCarousel', function(){
    return {
        restrict: 'E',
        transclude: false,
        link: function (scope) {
            scope.initCarousel = function(element) {
                // provide any default options you want
                var defaultOptions = {
                    autoplay:true,
                    autoplayTimeout:2500,
                    loop:false,nav : true,
                    responsiveClass:true,
                    margin: 30,
                    responsive:{
                        0:{items:1},
                        767:{items:3},
                        992:{items:4}
                    }
                };
                var customOptions = scope.$eval($(element).attr('data-options'));
                // combine the two options objects
                for(var key in customOptions) {
                    defaultOptions[key] = customOptions[key];
                }
                // init carousel
                $(element).owlCarousel(defaultOptions);
            };
        }
    };
}).directive('owlCarouselItem', [function() {
    return {
        restrict: 'A',
        transclude: false,
        link: function(scope, element) {
            // wait for the last item in the ng-repeat then call init
            if(scope.$last) {
                scope.initCarousel(element.parent());
            }
        }
    };
}]);

以上对我有用，除了。最后一项的高度增加超过下面的其他项。

您可以看到上面显示的最后一项。请问我该如何解决这个问题，是什么原因？任何帮助将不胜感激。

【问题讨论】：

您是否一次检查了 3 个项目？工作正常吗？
@ManishSharma 列表的最后一项通常会这样显示。我也试过 3 件。
我可以看到任何工作代码吗？因为这可能是owl-carousel创建动态宽度的问题。

标签： javascript css angularjs twitter-bootstrap

【解决方案1】：

试试这个

.directive('owlCarousel', function(){
    return {
        restrict: 'EA',
        transclude: false,
        link: function (scope, element, attrs) {
            scope.initCarousel = function() {
                // provide any default options you want
                var defaultOptions = {
                    autoplay:true,
                    autoplayTimeout:2500,
                    loop:false,nav : true,
                    responsiveClass:true,
                    margin: 30,
                    responsive:{
                        0:{items:1},
                        767:{items:3},
                        992:{items:4}
                    }
                };
                $(element).owlCarousel(defaultOptions);
            };
        }
    };
}).directive('owlCarouselItem',[function() {
     return function(scope) {
     if (scope.$last) {
        scope.initCarousel();
     }
    };
  }]);

参考这个问题在这里它对我有用。

【讨论】：