Angular-slick ng-lặp lại $ http nhận

Question

Tôi đã cố gắng tất cả cuối tuần để hiển thị dữ liệu (mà tôi lấy với $http.get) trong băng chuyền góc trơn sử dụng ng-repeat, trong vô vọng ...

tôi đã đọc về vấn đề nổi tiếng: here và here.

tôi cố gắng sử dụng init-onload và data thuộc tính, vô ích ...

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 mô-đun được định nghĩa trong tập tin app.js của tôi , Tôi đã sử dụng yeoman để dàn dựng dự án của mình)

Sẽ rất tuyệt nếu bạn có thể giúp tôi.

Answer 1

Tôi khuyên bạn nên sử dụng ng-if trên phần tử slick. Điều đó sẽ chỉ tải slick chỉ thị khi dữ liệu có mặt chỉ bằng cách kiểm tra độ dài của dữ liệu.

Markup

<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

tôi sử dụng băng chuyền trơn tiêu chuẩn, không phiên bản góc. Bạn chỉ cần đợi kết thúc góc tải dữ liệu. 1 giây hoặc ít hơn là ok Ví dụ

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