Slick Carousel mit Angular JS

Question

Ich verwende Slick Karussell in einer meiner AngularJS Anwendung. Dafür habe ich erstellt Richtlinie haben sich wie folgt:

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

Hier ist mein Code in View-Datei:

<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 diesem Fall ist es in Ordnung und die Initialisierung einwandfrei funktioniert.

Aber wenn ich Folien dynamisch mit ngRepeat erstelle, initialisiert es nicht und zeigt Folien nacheinander an.

Hier ist mit meinem Code 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> 

Jeder Vorschlag, wie kann ich es beheben?

Answer 1

Ich vermute, dass das Slick-Plugin möglicherweise das DOM komplett gerendert werden muss, um ordnungsgemäß zu funktionieren.

Versuchen:

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

Answer 2

$ timeout noch die Daten nicht genug Zeit für mein Szenario zu initialisieren gegeben hat, damit ich die Richtlinie ein bisschen mehr sehen für den Dateninhalt zu haben, dies haben könnte geändert (auch die Wirkung von Rebinding, wenn sich die Daten ändern, nur nicht, wenn der DOM initialisiert onLoad, wenn Sie die Verwendung von isInitialized) ändern:

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

auf diese Weise AngularJS Uhren für die Daten geladen werden und bis Haken nur die glatte, wenn Daten haben Länge.

(btw $ watch ist notwendig, anstelle von $ beobachten, weil "Daten" -Attribut keine Interpolation verwendet ("{{}}}"): Werfen Sie einen Blick auf this great answer, wenn Sie das Tief erreichen wollen -doWn auf diese)

Nutzung:.

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

dank this so answer und this github, die ich bekam von this so question