Slick Carousel with Angular JS

Question

Sto usando la giostra Slick in una delle mie applicazioni AngularJS. Per questo ho creato direttiva come segue:

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

Ecco il mio codice nel file di visualizzazione:

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

In questo caso si sta lavorando bene e l'inizializzazione correttamente.

Ma quando creo le diapositive dinamicamente utilizzando ngRepeat, non si inizializza e mostra le diapositive una dopo l'altra.

Ecco il mio codice utilizzando 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> 

Qualsiasi suggerimento, come posso risolverlo?

Answer 1

Ho il sospetto che il plug-in slick possa richiedere che il DOM sia completamente renderizzato per funzionare correttamente.

Prova:

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

Answer 2

$ timeout ancora non ha dato i dati abbastanza tempo per inizializzare per il mio scenario così ho modificato la direttiva un po 'più da guardare per i dati hanno un contenuto (questo potrebbe anche avere l'effetto di rilegatura ogni volta che le modifiche dei dati, non solo una volta il DOM inizializza onLoad, se si cambia l'uso di isInitialized):

app.directive('slickSlider', function() { 
    return { 
     restrict: 'A', 
     scope: {'data': '='}, 
     link: function (scope, element, attrs) { 
      var isInitialized = false; 
      scope.$watch('data', function(newVal, oldVal) { 
       if (newVal.length > 0 && !isInitialized) { 
        $(element).slick(scope.$eval(attrs.slickSlider)); 
        isInitialized = true; 
       } 
      }); 
     } 
    } 
}); 

angularJS questo modo orologi per i dati da caricare e aggancia la chiazza di petrolio, quando solo i dati hanno lunghezza.

(btw $ watch è necessario, anziché $ observ, poiché l'attributo "data" non utilizza l'interpolazione ("{{...}}"): Dai uno sguardo allo this great answer se vuoi ottenere il minimo down su questo)

utilizzo:.

<div class="clearfix" data="slides" 
    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> 

grazie a this so answer e this github che ho avuto modo di this so question