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.
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.
Share Improve this question edited May 23, 2017 at 12:34 CommunityBot 11 silver badge asked Jul 5, 2015 at 21:01 user4820423user4820423 1032 silver badges6 bronze badges 3-
1
well, I don't think that would work quite right, since
init-onloadis meant to wait until you have a variable fordata, but since you pre-populate that variable with an empty array before making your$httprequest, slick isn't going to know it's supposed to wait. does it work if you remove the linestore.products = [];? – Claies Commented Jul 5, 2015 at 21:10 - or, delay loading slick, as in the answer from @PankajParkar – Claies Commented Jul 5, 2015 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 Commented Jul 6, 2015 at 7:35
2 Answers
Reset to default 16I'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>
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);