L'application angularjs ng-repeat pour 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>
Vue carrousel ici: Owl-carousel2
Je suis en cours d'exécution dans une question, où à chaque fois que le ng-repeat directive est appliquée à carrousel les éléments sont empilés verticalement au lieu d'être mise à l'horizontale.
Si je quitte ng-repeat et l'utilisation des éléments statiques, puis il travaille comme il se doit.
Est-il une directive que je peux les écrire et de les appliquer à owl-carrousel de maintenir la mise en page?
Aussi ce qui est sur le ng-repeat qui est à l'origine du carrousel à la pause?
Angulaire est en quelque sorte le décapage de la chouette-le carrousel de classes appliqué sur le carrousel?
Remarque* Si la liste manuellement, puis parcourir et ajouter les éléments à l'aide de :
var div = document.createElement('div');
var anchor = document.createElement('a');
var img = document.createElement('img');
.....
carousel.appendChild(div);
puis appel de la chouette.owlCarousel ({..}), Il fonctionne, ne sais pas si c'est le meilleur travail autour de parce que ng-repeat rend tout plus facile.
J'ai découvert un hack , si j'enveloppe la chouette init dans un délai d'attente puis ng-repat œuvres.
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>
découvrez le contenu, j'ai ajouté ci-dessus
Comment puis-je contourner ce problème, si c'est réellement le problème?
Dois-je construire ma liste d'appel de la chouette-le carrousel de construire une fois que la liste est remplie?
setTimeout(function(){ ...l'appel de la chouette init maintenant },1000); le truc après la liste est chargé
OriginalL'auteur Fabii | 2015-01-16
Vous devez vous connecter pour publier un commentaire.
A été en mesure de modifier une directive de DTing sur un autre post pour qu'il fonctionne avec plusieurs carrousels sur la même page. Ici, c'est un travail plnkr
-- Edit --
Avoir un autre plnkr pour donner un exemple sur la façon d'ajouter un élément. Faire un reinit() ne fonctionne pas cause de tout temps, le owl carousel est détruite, elle perd les données - éléments et ne peut pas s'initialiser à nouveau.
Voici le code HTML
chouette points n'ont pas été affichés à l'aide de cette
Que dois-je faire si chaque élément de mon tableau est une requête GET distincte et après chaque réponse, le
if(scope.$last)
est vrai? tous les éléments sont à l'extérieur du manège, comment cela peut-il être fixé?Je veux réinitialiser le carrousel. Je fais une demande dans la portée.initcarousel fonction en tant que "champ d'application.$watchCollection('item', function(newValue, oldValue) { if (newValue){ element.de données('owlCarousel').reinit({5, pagination: false, rewindNav : false,responsiveClass:true, itemsCustom:[[768,5]]}); } });" mais c'est en donnant un élément vide sur chaque reinit.
Je n'avait pas de succès avec owl.reinit() mais j'ai eu du succès avec l'ajout d'un seul élément. Je laisse les observateurs off sur: les points 1 et ::items2 et il suffit de pousser un nouveau numéro dans le tableau et ajouter le code html via une fonction. Mise à jour plnkr peut être trouvé ici: plnkr.co/modifier/qAnXhA7yVyZDQUq6sXGY?p=preview
OriginalL'auteur JKOlaf
J'ai essayé de bidouiller avec les différentes directives, mais pas eu de chance jusqu'à ce que j'ai découvert ça, il pourrait un peu un hack correction, mais il fonctionne quand même.
Voici mon div de l'installation:
$champ d'application.mediaitems est généré à l'aide d'ajax appel. J'ai trouvé que si je le retard de la chouette d'initialisation jusqu'à ce que ma liste était peuplée ensuite, il serait de rendre correctement. Aussi, si vous décidez que vous voulez vous mettre à jour la liste dynamiquement, il suffit d'appeler le setupcarousel fonction (à regarder ci-dessous) après la liste a été rempli et il sera re-init du carrousel.
Noter que le carrousel init est dans un fichier externe au sein d'une fonction anonyme. C'est juste la façon dont j'ai choisi de le configurer, vous pouvez avoir le vôtre ou en ligne cependant vous s'il vous plaît.
Dans mon contrôleur, j'ai eu quelque chose comme ceci :
Tant pis, trouvé le problème! Pour quelque raison que ce soit, la ligne "if(typeof chouette.de données('owlCarousel') != 'undefined')" n'était pas attraper indéfini d'objets pour moi, donc j'ai juste cassé dans "var owlData = chouette.de données('owlCarousel')" avant le si, et puis ne "si(owlData === undefined)" et cela a fonctionné comme un charme. Merci!
OriginalL'auteur Fabii
L'Angulaire de l'INTERFACE utilisateur de l'Équipe a mis en place un ensemble de bootstrap composants mis en œuvre comme angulaire directives. Ils sont super élégant et rapide à mettre en œuvre, et parce qu'ils sont les directives, vous ne courez pas dans les problèmes avec l'utilisation de jquery dans angulaire du projet. L'une des directives est un carrousel. Vous pouvez le trouver ici et ici. J'ai foiré autour avec des manèges pour un long moment angulaire. J'ai eu la chouette au travail après quelques ennuyeux bricolage, mais AngularUI de la mise en œuvre est beaucoup plus facile.
OriginalL'auteur Patrick Motard