1

我无法在 angularjs 动态内容中加载猫头鹰轮播。

我使用这个（编辑的）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。

4

1 回答 1

0

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

于 2015-08-25T22:36:01.120 回答