將angularjs ng-repeat應用於owl-carousel
[英]Applying angularjs ng-repeat to owl-carousel
問題描述
<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>
在這里查看輪播： Owl-carousel2
我遇到了一個問題，即每當ng-repeat指令應用於輪播時，項目都是垂直堆疊而不是水平布局。
如果我省略ng-repeat並使用靜態項目，那么它可以正常工作。
是否有指令我可以編寫並應用於owl-carousel來維護布局？
還有什么是導致旋轉木馬斷裂的ng-repeat？
有角度以某種方式剝離應用於旋轉木馬的貓頭鷹旋轉木馬類嗎？
注意*如果手動構建列表，則迭代並使用以下內容追加元素：
var div = document.createElement('div');
var anchor = document.createElement('a');
var img = document.createElement('img');
.....
carousel.appendChild(div);
然后調用owl.owlCarousel（{..}）它有效，不確定這是否是最好的解決方法，因為ng-repeat使一切變得容易一些。
我發現了一個hack，如果我將owl init包裝在超時中，那么ng-repat可以工作。
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>
4 個解決方案
解決方案1
25 已采納 2015-04-16 21:22:01
能夠在另一篇文章中修改DTing的指令，以使其在同一頁面上使用多個輪播。 這是一個有效的plnkr
- 編輯 - 讓另一個plnkr給出一個如何添加項目的示例。 執行reinit（）不起作用，因為任何時候owl輪播被破壞它會丟失數據元素並且永遠不會再次初始化。
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());
}
}
};
}]);
這是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>
解決方案2
5 2015-02-11 20:22:34
我嘗試擺弄不同的指令，但沒有運氣，直到我發現它，它可能有點修復，但它仍然有效。
這是我的div設置：
<div ng-repeat="item in mediaitems">
<img ng-src="item.imageurl" />
</div>
$ scope.mediaitems是使用ajax調用生成的。 我發現如果我將owl初始化延遲到我的列表被填充之后，那么它將正確地呈現它。 此外，如果您決定要更新動態列表，只需在填充列表后調用setupcarousel函數（如下所示），它將重新啟動輪播。
請注意，carousel init位於匿名函數中的外部文件中。 這就是我選擇設置它的方式，你可以讓你的在線或者你喜歡。
在我的控制器中，我有這樣的事情：
$scope.populate = function(){
$timeout(function(){
$scope.mediaitems = returnedlist; //list of items retrun from server
utils.setupcarousel(); //call owl initialization
});
};
var utils = (function(){
var setupcarousel = function(){
console.log('setting up carousel..');
var owl = $('.owl-carousel');
if(typeof owl.data('owlCarousel') != 'undefined'){
owl.data('owlCarousel').destroy();
owl.removeClass('owl-carousel');
}
owl.owlCarousel({
loop: false,
nav: true,
margin: 10,
responsive: {
0: {items: 3 },
600: {items: 5},
960: { items: 8},
1200:{items: 10},
1600:{items: 12}
}
});
};
return{
....
}
})();
解決方案3
1 2015-01-16 20:02:26
解決方案4
0 2017-05-25 09:14:00
這與JKOlaf提到的答案相同。 但是我添加了響應行為，提供了更好的用戶體驗。 2個主要改進：1。完全響應代碼，在不同設備中產生更好的UX。 2.現在處理“autoHeight”屬性，從而產生較小的圖像縮略圖。
代碼如下：
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 -- Edit -- Have another plnkr to give an example on how to add an item. Doing a reinit() did not work cause any time the owl carousel is destroyed it loses the data- elements and can never initialize again. 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]; } defaultOptions['responsive'] = { 0: { items: 1 }, 600: { items: 3 }, 1000: { items: 6 } }; // 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()); } } }; }]);
您可以根據需要更改響應項目計數。 對於較大的圖像縮略圖，將其設置為較小的值。 希望這會對某人有所幫助，並感謝原始答案提供者。
如何將ng-repeat的angular指令綁定到Owl Carousel
[英]How to bind angular directive with ng-repeat to Owl Carousel
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
AngularJS ng-repeat的貓頭鷹輪播問題
不用jQuery的AngularJS ng-repeat輪播
Slick Carousel和AngularJS Ng重復
AngularJs：輪播中包含ng-repeat的問題
使用 ng-repeat angularjs 在表中應用行跨度
angular js ng-repeat不適用於貓頭鷹輪播
如何將ng-repeat的angular指令綁定到Owl Carousel
jQuery Owl-Carousel在angularJS中不起作用
AngularJS和owl-carousel環境中的數組串聯
autoHeight貓頭鷹傳送帶2
相關標簽