7

I've been trying all the week end to display data (that I fetch with $http.get) in the slick angular carousel using ng-repeat, in vain...

I've read about the well known issue: here and here.

I tried to use the init-onload and data attributes, in vain...

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 module is defined in my app.js file, I used yeoman to scaffold my project)

It would be great if you could help me.

Community
  • 1
  • 1
user4820423
  • 103
  • 2
  • 6
  • 1
    well, I don't think that would work quite right, since `init-onload` is meant to wait until you have a variable for `data`, but since you pre-populate that variable with an empty array before making your `$http` request, slick isn't going to know it's supposed to wait. does it work if you remove the line `store.products = [];`? – Claies Jul 05 '15 at 21:10
  • or, delay loading slick, as in the answer from @PankajParkar – Claies Jul 05 '15 at 21:12
  • Thanks a lot ! It works as well as the Pankaj Parkar's method. Thanks to both of you I've understood an important point. – user4820423 Jul 06 '15 at 07:35

2 Answers2

16

I'd suggest you to use ng-if on slick element. That will only load slick directive only when data is present just by checking length of data.

Markup

<slick ng-if="ctrl.products.length">
    <div ng-repeat="product in ctrl.products">
       <img ng-src="{{product.image}}" alt="{{product.title}}"/>
    </div>
</slick>
Pankaj Parkar
  • 134,766
  • 23
  • 234
  • 299
1

I use standard slick carousel, not angular version. You just have to wait for angular finish loading the data. 1 second or less is ok For example

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