更新ng-repeat元素后重新启动owl-carousel

时间:2016-02-10 17:12:13

标签: angularjs angularjs-directive angularjs-ng-repeat owl-carousel

我正在使用带有ng-repeat的猫头鹰轮播,并且我尝试在更新ng-repeat元素时重新启动轮播。

我有以下html:

<div class="row">       
    <div owl-carousel class="new-carousel-holder">
        <div owl-carousel-item ng-repeat="c in categories" class="item">
            <a href="#" >
                <div class="img-holder">
                    <img ng-src="{{ c.image }}" alt="">
                    <span>{{ c.name | translate }}</span>
                </div>
            </a>
        </div>
    </div>
</div>

这些是指令:

angular.module 'app'
.directive 'owlCarouselItem', () ->
    restrict: 'A'
    transclude: false
    link: (scope, element) ->

        initCarousel = () ->
            if scope.$last
                 scope.initCarousel element.parent()

        initCarousel()

angular.module "app"
.directive "owlCarousel", () ->
    restrict: "A"
    transclude: false
    link: (scope, elem, attr) ->

        scope.initCarousel = (element) ->
            $(element).owlCarousel
                stagePadding: 85
                loop: true
                margin: 22
                nav: true
                responsive:
                    0: items: 4
                    760: items: 7
                    1000: items: 10
                    1200: items: 13

问题是类别模型可以改变,我需要重新启动轮播。我尝试了不同的方法,但没有一个适合我。

1 个答案:

答案 0 :(得分:0)

也许这可能会有所帮助。我在this directive工作,使其适用于owl-carousel 2.0.0-beta-2.4

它等待ng-repeat中的最后一项然后用超时调用carousel init函数

这是一个有效的plunker