角光滑NG-重複$ HTTP GET

我一直在嘗試所有的週末使用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來搭建我的項目）

如果你能幫助我，那將會很棒。

來源

2015-07-05 user4820423

好，我不認爲這工作很正確，因爲'INIT-onload'意味着要等到你有'data'一個變量，但既然你在發出'$ http'請求之前用一個空數組預先填充該變量，那麼浮油不會知道它應該等待。如果你刪除了'store.products = [];'行，它會起作用嗎？ – Claies

或延遲加載浮油，如@PankajParkar回答 – Claies

非常感謝！它的工作方式和Pankaj Parkar的方法一樣。感謝你們兩位，我明白了一個重要的觀點。 – user4820423

我建議你在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>

來源

2015-07-05 21:10:27

這實際上非常聰明。我從來沒有想過要用ng-if來達到這個目的。必須記住那一個。 – jme11

@ jme11感謝兄弟..它只是真棒，但你需要遵循'點規則'，而使用這個 –

非常感謝！它的工作方式和Claies的方法一樣。感謝你們兩位，我明白了一個重要的觀點。 – user4820423

我使用標準的光滑轉盤，沒有棱角的版本。你只需要等待角加載數據。 1秒或更少是好的例如

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

來源

2016-05-25 09:45:41 kecco

角光滑NG-重複$ HTTP GET

回答

相關問題