Appliquer angularjs ng-repeat à carwlel de hibou

<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>

Regardez le carrousel ici: Owl-carousel2

Je suis confronté à un problème où chaque fois que la directive ng-repeat est appliquée au carrousel, les éléments sont empilés verticalement au lieu d'être mis en page horizontalement.

Si je supprime ng-repeat et j'utilise des éléments statiques, cela fonctionne comme il se doit.

Existe-t-il une directive que je peux écrire et appliquer au carrousel de hibou pour maintenir la mise en page?

Aussi, qu'est-ce qu'il y a à propos de ng-repeat qui cause le carrousel à la rupture?

Est-ce que d'une certaine manière, les angles sont en train de décaper les classes de chouette-carrousel appliquées au carrousel?

Remarque * Si vous construisez la liste manuellement, faites itérer et ajoutez les éléments en utilisant:

 var div = document.createElement('div'); var anchor = document.createElement('a'); var img = document.createElement('img'); ..... carousel.appendChild(div);

Puis appeler owl.owlCarousel ({…}) Cela fonctionne, pas sûr si c'est le meilleur travail parce que ng-repeat rend tout un peu plus facile.

J'ai découvert un hack, si j'enveloppe l'hibou init dans un délai d'attente alors ng-repat fonctionne.

 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>

A été capable de modifier une directive à partir de DT sur une autre publication pour la faire fonctionner avec plusieurs carrousels sur la même page. Voici un plnkr de travail

– Editer – Avoir un autre exemple pour donner un exemple sur l'ajout d'un élément. Faire une réinitialisation () n'a pas fonctionné car chaque fois que le carrousel de la chouette est détruit, il perd les éléments de données et ne peut plus jamais l'initialiser.

 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()); } } }; }]);

Voici le 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="[email protected]" src="https://code.angularjs.org/1.3.15/angular.js" data-semver="1.3.15"></script> <script data-require="[email protected]" 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>

J'ai essayé de jouer avec des directives différentes, mais j'ai eu de la chance jusqu'à ce que je l'a découvert, il pourrait être un problème, mais cela fonctionne néanmoins.

Voici ma configuration div:

 <div ng-repeat="item in mediaitems"> <img ng-src="item.imageurl" /> </div>

$ Scope.mediaitems est généré à l'aide d'un appel ajax. J'ai trouvé que si j'avais retardé l'initialisation du chouette jusqu'à ce que ma liste soit peuplée, elle la rendrait correctement. De plus, si vous décidez que vous souhaitez mettre à jour votre liste de manière dynamique, il suffit d'appeler la fonction setupcarousel (voir ci-dessous) après que la liste a été peuplée et qu'elle re-init le carrousel.

Notez que carousel init se trouve dans un fichier externe dans une fonction anonyme. C'est exactement ce que j'ai choisi de mettre en place, vous pouvez avoir le vôtre en ligne ou, si vous le souhaitez.

Dans mon contrôleur, j'ai quelque chose comme ça:

 $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{ .... } })();

L'équipe Angular UI a mis en place un ensemble de composants bootstrap mis en œuvre en tant que directives angulaires. Ils sont super intelligents et rapides à mettre en œuvre, et parce qu'ils sont des directives, vous n'êtes pas confronté à des problèmes avec l'utilisation de jquery dans un projet angulaire. Une des directives est un carrousel. Vous pouvez le trouver ici et ici . Je me suis dérangé avec des carrousels pendant longtemps avec des angulaires. J'ai eu la chouette à travailler après un bricolage gênant, mais la mise en œuvre d'AngularUI est beaucoup plus facile.

J'espère que cela aidera quelqu'un. Il peut gérer plusieurs carrousels, vous pouvez déclencher des événements et, lorsqu'ils sont redistribués, vont au dernier élément / élément actuel.

https://gist.github.com/daniel3d/829fd967d4436af220082b76c3153362

C'est la même réponse que celle mentionnée par JKOlaf. Cependant, j'ai ajouté un comportement réactif qui offre un meilleur UX. 2 améliorations majeures: 1. Un code pleinement réactif qui améliore l'UX dans différents appareils. 2. La propriété "autoHeight" est traitée maintenant en résultant une miniature plus petite des images.

Le code va plus bas:

 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()); } } }; }]);