2013-07-24 2 views
3

저는 wookmark 플러그인과 angularjs를 사용하여 미리보기 이미지와 같은 pinterest를 만드는 작업에 참여하고 있습니다. 서버가 응답하는 데 걸리는 시간 때문에 10 초 $ timeout을 사용하여 미리보기 이미지를 표시 할 수 있습니다. 데이터가 완전히로드 된 후에 레이아웃을 호출하기를 원했습니다. 나는 약속했지만 운이 없었습니다.

$ timeout을 사용하지 않고 Wookmark 레이아웃을 호출하는 방법이 있습니까?

내 코드 belows로는 :

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

angle-deckgrid라는 또 다른 옵션이 있습니다. 확인 해봐. – nicoabie

답변

2

하나님 감사합니다!

마침내 나는 그것을 알아 냈습니다. 나는 $ timeout에서 지연을 0으로 설정했다.

어떻게?

$ timeout은 실제로 DOM이 브라우저에서 렌더링을 완료 한 후에 실행됩니다. 따라서 0 밀리 초의 지연도 작동합니다.