我使用Angular Js指令在我的项目中添加了owl carousel。以下是我添加到项目中使用Owl Carousel的指令:
angular.module('app').directive("owlCarousel", function () {
return {
restrict: 'E',
transclude: false,
link: function (scope, element) {
scope.initCarousel = function (element) {
// provide any default options you want
var defaultOptions = {
items: 2,
nav: true,
mouseDrag: true,
autoplay:true,
autoplayTimeout:2000,
autoplayHoverPause:false
};
var customOptions = scope.$eval($(element).attr('data-options'));
// combine the two options objects
for (var key in customOptions) {
defaultOptions[key] = customOptions[key];
}
//destroy
if ($(element).hasClass('owl-loaded') === true) {
$(element).trigger('destroy.owl.carousel').removeClass('owl-carousel owl-loaded');
$(element).find('.owl-stage-outer').children().unwrap();
}
// init carousel
setTimeout(function () {
$(element).owlCarousel(defaultOptions);
}, 10)
};
}
};
})
.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());
}
}
};
当我使用ng-repeat绑定此指令时,它按预期工作,但是当我使用任何搜索过滤器时,旋转木马完全失真。我尝试了很多像广播这样的方法,但问题仍然存在。
以下是我实施的Plunker Plunker
我认为我需要在应用过滤器时重新绑定owl轮播,但我不知道如何实现此类功能。