我无法在 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。
最佳答案
您可以将模型传递到指令作用域,然后执行 scope.$watch
并使用 reinit
方法重新初始化 owlCarousel。这只是一个想法,如果您可以指定 plunkr 或 fiddle 会更容易提供帮助。
关于javascript - 使用 AngularJS 动态内容加载 Owl Carousel 2,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32215133/