web-dev-qa-db-fra.com

Appliquer angularjs ng-repeat à owl-carrousel

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

Voir le carrousel ici: Owl-carousel2

Je rencontre 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 disposés horizontalement.

Si je laisse ng-repeat et utilise des éléments statiques, cela fonctionnera comme il se doit.

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

De plus, qu'en est-il de ng-repeat qui provoque la rupture du carrousel? 

Est-ce que Angular supprime en quelque sorte les classes de hibou-carrousel appliquées au carrousel?

Note * Si vous construisez la liste manuellement, parcourez 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 appelez le owl.owlCarousel ({..}). Cela fonctionne, mais vous ne savez pas si c’est le meilleur, car ng-repeat facilite tout.

J'ai découvert un hack, si j'emballe le hibou init dans un délai d'attente puis 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>
javascriptangularjsangularjs-directiveowl-carousel
13
Fabii

A pu modifier une directive de DTing sur un autre post pour la faire fonctionner avec plusieurs carrousels sur la même page. Voici un travail plnkr

- Éditez -- Ayez un autre plnkr pour donner un exemple sur la façon d’ajouter un élément. Faire un reinit () n'a pas fonctionné car chaque fois que le carrousel de hibou est détruit, il perd les éléments de données et ne peut plus jamais s'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>
24
JKOlaf

J'ai essayé de me débrouiller avec différentes directives mais je n'ai pas eu de chance jusqu'à ce que je découvre cela, cela pourrait être un correctif, mais ça fonctionne quand même. 

Voici ma configuration div:

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

$ scope.mediaitems est généré en utilisant un appel ajax. J'ai trouvé que si je retardais l'initialisation de la chouette jusqu'à ce que ma liste soit remplie, elle le rendrait correctement. De plus, si vous décidez que vous souhaitez mettre à jour votre liste, appelez la fonction setupcarousel (voir ci-dessous) une fois la liste remplie de manière dynamique, une fois la liste renseignée. Le carrousel sera réinitialisé.

Notez que le carrousel init est dans un fichier externe dans une fonction anonyme. C'est comme ça que j'ai choisi de le configurer, vous pouvez avoir le vôtre en ligne ou comme bon vous semble. 

Dans mon contrôleur, j'avais 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{
      ....
    }

})();
5
Fabii

L’équipe de l’interface utilisateur angulaire a rassemblé un ensemble de composants d’amorçage implémentés sous forme de directives angulaires. Ils sont très élégants et rapides à mettre en œuvre, et comme il s’agit de directives, vous n’aurez aucun problème à utiliser jquery dans un projet angulaire. Une des directives est un carrousel. Vous pouvez le trouver ici et ici . J'ai joué avec des carrousels pendant longtemps avec angular. Je dois faire fonctionner le hibou après quelques travaux fastidieux, mais la mise en œuvre d'AngularUI est beaucoup plus facile. 

1
Patrick Motard

C'est la même réponse que celle mentionnée par JKOlaf. Cependant, j'ai ajouté un comportement réactif qui fournit une meilleure expérience utilisateur. 2 améliorations majeures: 1. Code entièrement réactif pour une meilleure expérience utilisateur dans différents appareils . 2. La propriété "autoHeight" est maintenant gérée, ce qui donne une vignette plus petite des images.

Le code va en dessous:

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

Vous pouvez modifier le nombre d'articles recevables selon vos besoins. Définissez une valeur plus petite pour une plus grande vignette des images . Nous espérons que cela aidera quelqu'un et merci au fournisseur de réponse d'origine.

0
Dash