Применяя angularjs ng-repeat к сове-карусели
<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 и использую статические элементы, то все будет работать как надо.
Есть ли директива, которую я могу написать и применить к сове-карусели для поддержания макета?
Кроме того, что такое ng-repeat, которое приводит к поломке карусели?
Угловат ли как-то зачистка классов совы-карусели, применяемых к карусели?
Примечание * Если составить список вручную, выполните итерацию и добавьте элементы, используя:
var div = document.createElement('div');
var anchor = document.createElement('a');
var img = document.createElement('img');
.....
carousel.appendChild(div);
затем вызовите owl.owlCarousel({..}). Он работает, но не уверен, что это лучший вариант, потому что ng-repeat делает все немного проще.
Я обнаружил хак, если я заверну сову 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 ответа
Был в состоянии изменить директиву DTing для другого поста, чтобы она работала с несколькими каруселями на одной странице. Вот рабочий плнкр
- Edit - есть другой plnkr, чтобы дать пример того, как добавить элемент. Выполнение reinit() не сработало, потому что всякий раз, когда карусель совы уничтожается, она теряет элементы данных и больше никогда не сможет инициализироваться.
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>
Я попытался поиграться с разными директивами, но мне не повезло, пока я не обнаружил это, это может быть немного исправлено, но, тем не менее, работает.
Вот моя настройка div:
<div ng-repeat="item in mediaitems">
<img ng-src="item.imageurl" />
</div>
$ scope.mediaitems генерируется с помощью вызова ajax. Я обнаружил, что если я отложу инициализацию совы до тех пор, пока мой список не будет заполнен, то он будет правильно отображаться. Также, если вы решите, что хотите обновить список динамически, просто вызовите функцию setupcarousel (см. Ниже) после заполнения списка, и он повторно запустит карусель.
Обратите внимание, что 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{
....
}
})();
Команда Angular UI Team собрала набор компонентов начальной загрузки, реализованных в виде угловых директив. Они очень изящны и быстры в реализации, а поскольку они являются директивами, вы не столкнетесь с проблемами при использовании jquery в угловом проекте. Одной из директив является карусель. Вы можете найти это здесь и здесь. Я долго карабкался с каруселями с угловатыми. Я получил сову на работу после некоторой надоедливой работы, но реализация AngularUI намного проще.
Это тот же ответ, что упоминал JKOlaf. Однако я добавил к нему отзывчивое поведение, обеспечивающее лучший UX. 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());
}
}
};
}]);Вы можете изменить количество реагирующих элементов согласно вашему требованию. Установите меньшее значение для увеличения миниатюр изображений. Надеюсь, что это поможет кому-нибудь и благодаря оригинальному ответу поставщика.