Angular-Slick ng-repeat $ http bekommen

Question

Ich habe die ganze Woche Ende versucht, Daten anzuzeigen, in dem glatten Winkel Karussell (die ich mit $http.get holen) ng-repeat verwendet wird, vergebens ...

I‘ Lesen Sie über das bekannte Problem: here und here.

Ich versuchte, die init-onload und data Attribute zu verwenden, vergeblich ...

HTML:

<div ng-controller="LandingCtrl as ctrl"> 

... 

<slick init-onload=true data="ctrl.products"> 
    <div ng-repeat="product in ctrl.products"><img src="{{product.image}}" alt="{{product.title}}"></div> 
</slick> 

... 

</div> 

JS:

angular.module('myApp') 
    .controller('LandingCtrl',['$http', function($http){ 

    var store = this; 
    store.products = []; 
    $http.get('products.json') 
    .success(function(data){ 
     store.products = data; 
     console.log(data); //display the json array 
    }); 

}]); 

(myApp Modul in meiner app.js-Datei definiert ist Ich benutzte yeoman, um mein Projekt zu rüsten)

Es wäre toll, wenn Sie mir helfen könnten.

Answer 1

Ich würde vorschlagen, dass Sie ng-if auf slick Element verwenden. Das lädt nur slick Direktive nur, wenn Daten vorhanden sind, nur durch Überprüfung der Länge der Daten.

Markup

<slick ng-if="ctrl.products.length"> 
    <div ng-repeat="product in ctrl.products"> 
     <img ng-src="{{product.image}}" alt="{{product.title}}"/> 
    </div> 
</slick> 

Answer 2

I Standard Slick Karussell, nicht abgewinkelte Ausführung verwenden. Sie müssen nur warten, bis die Daten abgewinkelt sind. 1 Sekunde oder weniger ist ok Zum Beispiel

setTimeout(
     function() 
     { 
      $('#yourdiv').slick({ 
       autoplay: true 
      }) 
     }, 1000);