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 に答える