La nappe de Carrousel avec Angular JS

Je suis en utilisant Slick carrousel dans un de mes AngularJS application. Pour ce que j'ai créé directive comme suit:

  myApp.directive('slickSlider',function(){
   return {
     restrict: 'A',
     link: function(scope,element,attrs) {
       $(element).slick(scope.$eval(attrs.slickSlider));
   }
  }
 }); 

Voici mon code dans le fichier de vue:

  <div class="clearfix"  
  slick-slider="{dots: false, arrows: true, draggable: 
  false, slidesToShow:3, infinite:false}">
              <div class="my-slide">
                  <a><img ng-src="assets/img/img1.png"/></a>
              </div>
              <div class="my-slide">
                  <a><img ng-src="assets/img/img1.png"/></a>
              </div>
              <div class="my-slide">
                  <a><img ng-src="assets/img/img1.png"/></a>
              </div>
              <div class="my-slide">
                  <a><img ng-src="assets/img/img1.png"/></a>
              </div>
              <div class="my-slide">
                  <a><img ng-src="assets/img/img1.png"/></a>
              </div>
              <div class="my-slide">
                  <a><img ng-src="assets/img/img1.png"/></a>
              </div>
    </div>

Dans ce cas, il fonctionne très bien et l'initialiser correctement.

Mais quand je crée dynamiquement à l'aide de diapositives ngRepeat, il n'est pas en cours d'initialisation et montre des diapositives, l'un après l'autre.

Voici mon code à l'aide de ngRepeat

<div class="clearfix"  
  slick-slider="{dots: false, arrows: true, draggable: 
  false, slidesToShow:3, infinite:false}">
      <div class="my-slide" ng-repeat="slide in slides">
         <a><img ng-src="assets/img/{{slide.img}}"/></a>
       </div>
 </div>

Toute suggestion, comment puis-je le résoudre?

Remarque il y a une AnguarJS plugin ui-carrousel qui ne une nappe carrousel sans jQuery.

OriginalL'auteur Kalpesh Patel | 2014-07-02

Leave a Reply

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *