AngularJS ng-repeat的貓頭鷹輪播問題

Question

請我將貓頭鷹傳送帶用作傳送帶。 我的輪播與http://thebootstrapthemes.com/live/thebootstrapthemes-zenclassified/的輪播非常相似。 我在這里和這里遇到了類似的解決方案。 然后，我在下面的控制器中添加了類似的指令。

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

以上對我有用，除了。 最后一項的高度增加超過下面的其他項。

您可以在上方看到最后一個項目。 請問我該如何解決？原因是什么？ 任何幫助，將不勝感激。

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

在這里參考這個問題對我有用。