Nuru Salihu Nuru Salihu - 5 months ago 163
Javascript Question

owl-carousel issue with angularjs ng-repeat

Please i am using owl-carousel for my carousel. My carousel is very similar to the one here http://thebootstrapthemes.com/live/thebootstrapthemes-zenclassified/ . I came across a similar solution Here and Here . i then added a similar directive in my controller below.

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


The above works for me except. The last item's height increase beyond the other items below.



You can see the last item display above. Please how do i resolve that and what is the cause ? Any help would be appreciated.

Answer

Try this

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

Refer to this question Here Its what worked for me.