2013-07-24 48 views
3

我目前參與了一個使用wookmark插件和angularjs創建pinterest像thumbnails任務。我可以使用$ 10秒的超時顯示縮略圖,因爲服務器需要時間來響應。我想在數據完全加載後調用佈局。我已經嘗試過承諾,但沒有運氣。

有沒有辦法在不使用$ timeout的情況下調用Wookmark佈局?

我的代碼初級講座:

myApp.controller("MyCtrl", ['$scope', '$timeout', 'eventData', function($scope, $timeout, eventData) { 
    function init() { 
     $scope.publicstreams = []; 
     $scope.publicstreams = eventData.getEvent(0); 
     $timeout(initWookmark, 10000); 
    } 

    function initWookmark() { 
     var options = { 
      autoResize: true, // This will auto-update the layout when the browser window is resized. 
      container: $('#tiles'), // Optional, used for some extra CSS styling 
      offset: 5, // Optional, the distance between grid items 
      flexibleWidth: 310 // Optional, the maximum width of a grid item 
     }; 
     var handler = $('#tiles li'); 
     $('#tiles').imagesLoaded(function() { 
      // Prepare layout options. 
      // Get a reference to your grid items. 
      // Call the layout function. 
      handler.wookmark(options); 
     }); 
     handler.wookmark(options); 
    } 
    init(); 
}]); 

任何幫助將不勝感激!

+0

還有另一個選項叫做angular-deckgrid。一探究竟。 – nicoabie

回答

2

感謝上帝!

最後我想出了自己。我在$超時設置延遲爲0,它的工作。

如何?

$ timeout實際上在DOM完成在瀏覽器中的渲染後執行。所以即使是0毫秒的延遲也是如此。