Angular-slick ng-repeat $http 获取答案

【问题标题】：Angular-slick ng-repeat $http getAngular-slick ng-repeat $http 获取
【发布时间】：2015-07-05 21:01:26
【问题描述】：

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

我已经阅读了一个众所周知的问题：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 来搭建我的项目）

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

【问题讨论】：

好吧，我认为这不太合适，因为init-onload 是要等到你有一个data 的变量，但是因为你用一个空的预填充该变量在发出$http 请求之前，slick 不会知道它应该等待。如果删除store.products = [];这一行，它会起作用吗？
或者，延迟加载光滑，如@PankajParkar 的回答中所述
非常感谢！它与 Pankaj Parkar 的方法一样有效。多亏了你们两个，我明白了一个重要的点。

标签： javascript angularjs angularjs-ng-repeat ng-repeat angular-ng-if

【解决方案1】：

我建议您在 slick 元素上使用 ng-if。仅当仅通过检查数据长度存在数据时才会加载 slick 指令。

标记

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

【讨论】：

这实际上非常聪明。我从没想过为此目的使用 ng-if 。必须记住那个。
@jme11 谢谢兄弟.. 它太棒了，但你需要在使用这个时关注dot rule
非常感谢！它与 Claies 的方法一样有效。多亏了你们两个，我明白了一个重要的点。
@user4820423 很高兴为您提供帮助.. 谢谢 :)

【解决方案2】：

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

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

【讨论】：