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

  1. 20

    Je soupçonne que la marée noire plugin peut-être besoin du DOM pour être entièrement rendue à fonctionner correctement.

    Essayer: 

    myApp.directive('slickSlider',function($timeout){
 return {
   restrict: 'A',
   link: function(scope,element,attrs) {
     $timeout(function() {
         $(element).slick(scope.$eval(attrs.slickSlider));
     });
   }
 }
});
    Merci mon pote, c'est de travailler.
    Voulais juste confirmer, si l'on ne spécifie pas de retard paramètre $timeout fonction, ne fait que s'assurer qu'il s'exécute après le DOM est chargé?
    Oui, exécution de la fonction est reporté jusqu'après la phase de rendu.
    Si vous regardez le code source de $timeout, qu'il appelle $navigateur.reporter dessous. Le reporter méthode de mise en file d'exécution jusqu'à ce que après DOM est rendu. Malheureusement, ce fait n'est pas documentée trop bien. Vous pouvez trouver une discussion intéressante à ce sujet ici de l'Angulaire de l'équipe: github.com/angular/angular.js/issues/734. .
    Merci pour le partage. 🙂

    OriginalL'auteur