Question

我一直在尝试整个周末使用$http.get在光滑的角度轮播中显示数据（我用ng-repeat获取），徒劳无功......

我已经阅读了众所周知的问题：here和here。

我尝试使用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>

Answer 2

我使用标准的光滑旋转木马，而不是角度版本。您只需等待角度完成加载数据。 1秒或更短是可以的例如

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

Angular-slick ng-repeat $ http get

2 个答案: