Question

我无法在angularjs动态内容中加载owl carousel。

我使用这个（编辑过的）html：

<div id="Galeria" owlcarousel class="youplay-carousel gallery-popup">
      <a class="angled-img" href="http://www.youtube.com/watch?v={{video}}" ng-repeat="video in juego.Galerias.Videos">
         <div class="img">
            <img src="http://img.youtube.com/vi/{{video}}/maxresdefault.jpg" alt="">
         </div>
         <i class="fa fa-play icon"></i>
      </a>

      <a class="angled-img" href="/img/galerias/{{imagen}}" ng-repeat="imagen in juego.Galerias.Imagenes">
         <div class="img">
            <img src="/img/galerias/{{imagen}}" alt="">
         </div>
         <i class="fa fa-search-plus icon"></i>
      </a>
   </div>

这个（编辑过的）指令到我的应用程序：

app.directive('owlcarousel', function() {

    var linker = function(scope, element, attr) {
        var loadCarousel = function() {
            console.log(element);
            element.owlCarousel({
                loop: !0,
                stagePadding: 70,
                nav: !0,
                autoplay: 0 ? !0 : !1,
                autoplayTimeout: 0,
                autoplaySpeed: 600,
                autoplayHoverPause: !0,
                navText: ["", ""],
                responsive: {
                    0: {
                        items: 1
                    },
                    500: {
                        items: 2
                    },
                    992: {
                        items: 3
                    },
                    1200: {
                        items: 4
                    }
                }
            });
        }

        scope.$watch("juego.Galerias.Videos", function(value) {
            loadCarousel(element);
        });

        scope.$watch("juego.Galerias.Imagenes", function(value) {
            loadCarousel(element);
        })
    }

    return {
        restrict: "A",
        link: linker
    }

});

但每次加载新内容时我都无法加载轮播。我尝试绑定jquery事件，在控制器中调用函数......等等。

PD：我使用ng-routes并以动态方式加载html。

Answer 1

您可以将模型传递到指令范围，然后执行scope.$watch并使用reinit方法重新启动owlCarousel。这只是一个想法，如果你可以指定plunkr或小提琴，它会更容易帮助。

使用AngularJS动态内容加载Owl Carousel 2

1 个答案: