【问题标题】:Reinit owl-carousel after updating ng-repeat elements更新 ng-repeat 元素后重新初始化 owl-carousel
【发布时间】:2016-02-10 17:12:13
【问题描述】:

我正在使用带有 ng-repeat 的 owl carousel,并且我正在尝试在 ng-repeat 元素更新时重新初始化 carousel。

我有以下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

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

【问题讨论】:

  • 这个问题你解决了吗? ...我也有。

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


【解决方案1】:

也许这会有所帮助。我在 this directive 上工作以使其与 owl-carousel 2.0.0-beta-2.4 一起使用

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

这是一个有效的plunker

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-09-01
    • 1970-01-01
    • 1970-01-01
    • 2019-01-18
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多