2016-06-18 116 views
0

請給我的旋轉木馬使用貓頭鷹傳送帶。我的傳送帶與這裏的http://thebootstrapthemes.com/live/thebootstrapthemes-zenclassified/非常相似。我遇到了類似的解決方案Here和Here。然後我在我的控制器中添加了一個類似的指令。owl-carousel issue with angularjs ng-repeat

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

上面的作品對我來說除外。最後一個項目的高度超出了下面的其他項目。

你可以在上面看到的最後一項顯示。請問我該如何解決這個問題,原因是什麼?任何幫助,將不勝感激。

+0

您是否一次檢查過3個項目?它工作正常嗎? – Manish

+0

@ManishSharma列表中的最後一項經常顯示。我也嘗試過3個項目。 –

+0

是否有任何工作代碼,我可以看到。因爲這可能是貓頭鷹傳送帶創建動態寬度的問題。 – Manish

回答

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

參考這個問題在這裏它是什麼爲我工作。