角度过滤器与Owl Carousel无法正常工作

时间:2017-08-03 10:27:26

标签: javascript angularjs owl-carousel

我使用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轮播,但我不知道如何实现此类功能。

0 个答案:

没有答案