Angular-slick ng-repeat $http get

我整个周末都在尝试显示数据（我用$http.get）在光滑的角度旋转木马中使用ng-repeat，徒劳……

我读过一个众所周知的问题：here https://stackoverflow.com/questions/27141858/ng-repeat-with-slick-js-carousel and here https://github.com/vasyabigi/angular-slick/issues/2.

我尝试使用init-onload and data属性，无用……

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模块定义在我的app.js文件，我使用 yeoman 来搭建我的项目）

如果你能帮助我那就太好了。

我建议你使用ng-if on slick元素。那只会加载slick仅当数据存在时才通过检查数据长度来指示。

Markup

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