Angular-slick ng-repeat $ http get

Question

我一直在尝试整个星期结束时$http.get使用光滑的旋转木马显示数据(我用它取来)ng-repeat,徒劳无功......

我读过有关众所周知的问题:这里和这里.

我试图使用init-onload和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来支撑我的项目)

如果你能帮助我会很棒.

Answer 1

我建议你使用ng-if的slick元素.slick只有在数据存在时才会通过检查数据长度来加载指令.

标记

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