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

Question

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

我使用这个(编辑过的)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
    }

});

但是每次加载新内容时我都无法加载轮播。我尝试绑定(bind)jquery事件，调用 Controller 中的函数......等等。

PD:我使用 ng-routes 并动态加载 html。

Answer 1

您可以将模型传递到指令作用域，然后执行 scope.$watch 并使用 reinit 方法重新初始化 owlCarousel。这只是一个想法，如果您可以指定 plunkr 或 fiddle 会更容易提供帮助。