angolare-slick ng-ripetere $ HTTP GET

Question

ho cercato tutto il week end per visualizzare i dati (che vado a prendere con $http.get) nel carosello angolare chiazza di petrolio utilizzando ng-repeat, invano ...

I' Ho letto sul noto problema: here e here.

ho cercato di utilizzare gli attributi init-onload e data, invano ...

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 modulo è definito nel mio file app.js , Ho usato yeoman per impalcatura il mio progetto)

Sarebbe bello se potessi aiutarmi.

Answer 1

Ti suggerisco di utilizzare ng-if sull'elemento slick. Questo caricherà solo la direttiva slick solo quando i dati sono presenti semplicemente controllando la lunghezza dei dati.

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

Io uso carosello chiazza di petrolio standard, non la versione angolare. Devi solo aspettare la finitura angolare per caricare i dati. 1 secondo o meno è ok Per esempio

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