应用angularjs NG-重复到猫头鹰传送带 [英] Applying angularjs ng-repeat to owl-carousel
本文介绍了应用angularjs NG-重复到猫头鹰传送带的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
＆LT; DIV CLASS =猫头鹰旋转木马＆GT;
＆LT; DIV NG重复=，在ITEMLIST项目＆GT;
＆所述; A HREF =series.html＆GT;＆下; IMG纳克-SRC ={{items.imageUrl}}/＆GT;＆下; / A＆GT;
＆LT; / DIV＆GT;
＆LT; DIV＆GT;
＆所述; A HREF =series.html＆GT;＆下; IMG SRC =http://placehold.it/350x150/＆GT;＆下; / A＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
在这里查看旋转木马：猫头鹰carousel2
我运行到哪里每当纳克重复指令被应用到传送带上物品的问题是垂直堆叠的水平，而不是作为布局。
如果我离开了NG-重复和使用静态的物品，然后它工作，因为它应该。
有一个指令，我可以写，并适用于猫头鹰传送带保持布局？
还有什么是关于导致传送带打破纳克重复？
时的角度莫名其妙剥离应用到传送带猫头鹰传送带类？
请注意*如果手动生成列表，然后遍历并使用附加的元素：
DIV VAR =使用document.createElement（'DIV'）;
变种锚= document.createElement方法（'一个'）;
VAR IMG =使用document.createElement（'IMG'）;
.....
carousel.appendChild（DIV）;
然后调用owl.owlCarousel（{..}）它的工作原理，不知道这是因为周围的NG-重复使一切更容易一些最好的作品。
我发现一个黑客，如果我换了猫头鹰的init在超时然后NG-repat作品。
的setTimeout（函数（）{
......现在叫猫头鹰的init
}，1000）;
＆LT;链接rel =stylesheet属性HREF =CSS / owl.carousel.css/＆GT;
＆LT;链接rel =stylesheet属性HREF =CSS / owl.theme.default.min.css/＆GT;.....
＆LT;脚本的src =/ JS / lib目录/ owl.carousel.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本＆GT;
$（文件）。就绪（函数（）{
VAR猫头鹰= $（'猫头鹰旋转木马。'）;
owl.owlCarousel（{
.....
}）;
owl.on（'鼠标滚轮'，'.owl阶段'，函数（E）{
如果（e.deltaY大于0）{
owl.trigger（'next.owl'）;
}其他{
owl.trigger（'prev.owl'）;
}
亦即preventDefault（）;
}）;
}） ＆LT; / SCRIPT＆GT;
解决方案
之所以能够修改从 DTing 指令上另一个<一个href=\"http://stackoverflow.com/questions/29157623/owl-carousel-not-identifying-elements-of-ng-repeat/29685686#29685686\">post得到它与在同一页上的多个转盘工作。这是一个工作 plnkr
VAR应用= angular.module（'plunker'，[]）;app.controller（'MainCtrl'，函数（$范围）{
$ scope.items1 = [1,2,3,4,5];
$ scope.items2 = [1,2,3,4,5,6,7,8,9,10];
}）指令（owlCarousel功能（）{
返回{
限制：'E'，
transclude：假的，
链接：功能（范围）{
scope.initCarousel =功能（元素）{
//提供任何你想要的默认选项
VAR defaultOptions = {
};
VAR customOptions = $范围的eval（$（元素）.attr（数据选项'））;
//结合了两种选择对象
对（在customOptions VAR键）{
defaultOptions [关键] = customOptions [关键]
}
//初始化旋转木马
$（元素）.owlCarousel（defaultOptions）;
};
}
};
}）
.directive（'owlCarouselItem'，[功能（）{
返回{
限制：'A'，
transclude：假的，
链接：功能（范围，元素）{
//等待在NG-重复的最后一个项目，然后调用初始化
如果（范围。$最后一个）{
scope.initCarousel（element.parent（））;
}
}
};
}]）;
下面是HTML
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML NG-应用=plunker＆GT; ＆LT; HEAD＆GT;
＆LT;间的charset =UTF-8/＆GT;
＆LT;标题＆GT; AngularJS Plunker＆LT; /标题＆GT;
＆LT;脚本＆GT;的document.write（'＆LT;基本href =+ document.location +'/＆GT;'）;＆LT; / SCRIPT＆GT;
＆LT;链接rel =stylesheet属性HREF =style.css文件/＆GT;
＆LT;链接rel =stylesheet属性HREF =https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css/＆GT;
＆LT;链接rel =stylesheet属性HREF =https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css/＆GT;
＆LT;链接rel =stylesheet属性HREF =https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.transitions.min.css/＆GT;
＆LT;链接rel =stylesheet属性HREF =https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js/＆GT;
＆所述;脚本数据需要=angular.js@1.3.xSRC =的https：//$c$c.angularjs.org/1.3.15/angular.js数据semver =1.3.15＆GT ;＆LT; / SCRIPT＆GT;
＆所述;脚本数据需要=jquery@2.1.3数据semver =2.1.3SRC =HTTP：//$c$c.jquery.com/jquery-2.1.3.min.js＆GT ;＆LT; / SCRIPT＆GT;
＆LT;脚本src=\"https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js\"></script>
＆所述; SCRIPT SRC =app.js＆GT;＆下; /脚本＆GT;
＆LT; /头＆GT; ＆LT;机身NG控制器=MainCtrl＆GT;
＆lt;数据猫头鹰传送带类=猫头鹰传送带数据选项={导航：真，分页：假的，rewindNav：假}＆GT;
＆LT; DIV猫头鹰传送带项=NG重复=项:: items1级=项＆GT;
＆所述p为H.; {{::项}}＆下; / P＆GT;
＆LT; / DIV＆GT;
＆LT; /数据猫头鹰传送带＆GT;
＆lt;数据猫头鹰传送带类=猫头鹰传送带数据选项={导航：假的，分页：真，rewindNav：假}＆GT;
＆LT; DIV猫头鹰传送带项=NG重复=项:: items2级=项＆GT;
＆所述p为H.; {{::项}}＆下; / P＆GT;
＆LT; / DIV＆GT;
＆LT; /数据猫头鹰传送带＆GT;
＆LT; /身体GT;＆LT; / HTML＆GT;
<div class="owl-carousel">
<div ng-repeat="items in itemlist">
<a href="series.html"><img ng-src="{{items.imageUrl}}" /></a>
</div>
<div>
<a href="series.html"><img src="http://placehold.it/350x150" /></a>
</div>
</div>
View carousel here: Owl-carousel2
I'm running into an issue where whenever the ng-repeat directive is applied to carousel the items are stacked vertically instead of being layout horizontally.
If I leave out ng-repeat and use static items then it works as it should.
Is there a directive I can write and apply to owl-carousel to maintain the layout?
Also what is about ng-repeat that is causing the carousel to break?
Is angular somehow stripping the owl-carousel classes applied to the carousel?
Note* If build the list manually then iterate through and append the elements using :
var div = document.createElement('div');
var anchor = document.createElement('a');
var img = document.createElement('img');
.....
carousel.appendChild(div);
then call the owl.owlCarousel({..}) It works, not sure if this is the best work around because ng-repeat makes everything bit easier.
I discovered a hack , if I wrap the owl init in a timeout then ng-repat works.
setTimeout(function(){
...call owl init now
},1000);
<link rel="stylesheet" href="css/owl.carousel.css"/>
<link rel="stylesheet" href="css/owl.theme.default.min.css"/>
.....
<script src="/js/lib/owl.carousel.min.js"></script>
<script>
$(document).ready(function() {
var owl = $('.owl-carousel');
owl.owlCarousel({
.....
});
owl.on('mousewheel', '.owl-stage', function(e) {
if (e.deltaY > 0) {
owl.trigger('next.owl');
} else {
owl.trigger('prev.owl');
}
e.preventDefault();
});
})
</script>
解决方案
Was able to modify a directive from DTing on another post to get it working with multiple carousels on the same page. Here is a working plnkr
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.items1 = [1,2,3,4,5];
$scope.items2 = [1,2,3,4,5,6,7,8,9,10];
}).directive("owlCarousel", function() {
return {
restrict: 'E',
transclude: false,
link: function (scope) {
scope.initCarousel = function(element) {
// provide any default options you want
var defaultOptions = {
};
var customOptions = scope.$eval($(element).attr('data-options'));
// combine the two options objects
for(var key in customOptions) {
defaultOptions[key] = customOptions[key];
}
// init carousel
$(element).owlCarousel(defaultOptions);
};
}
};
})
.directive('owlCarouselItem', [function() {
return {
restrict: 'A',
transclude: false,
link: function(scope, element) {
// wait for the last item in the ng-repeat then call init
if(scope.$last) {
scope.initCarousel(element.parent());
}
}
};
}]);
Here is the HTML
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.transitions.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js" />
<script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.15/angular.js" data-semver="1.3.15"></script>
<script data-require="jquery@2.1.3" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<data-owl-carousel class="owl-carousel" data-options="{navigation: true, pagination: false, rewindNav : false}">
<div owl-carousel-item="" ng-repeat="item in ::items1" class="item">
<p>{{::item}}</p>
</div>
</data-owl-carousel>
<data-owl-carousel class="owl-carousel" data-options="{navigation: false, pagination: true, rewindNav : false}">
<div owl-carousel-item="" ng-repeat="item in ::items2" class="item">
<p>{{::item}}</p>
</div>
</data-owl-carousel>
</body>
</html>
这篇关于应用angularjs NG-重复到猫头鹰传送带的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
