火jQuery指令在角度後查看完全準備好

我正在使用自定義砌體類型佈局jQuery插件，它的作品令人驚歎，我試圖讓它在Angular中工作，這裏是迄今爲止的代碼：火jQuery指令在角度後查看完全準備好

app.directive('coursegridjs', function() { 
    return { 
     restrict: 'A', 
     link: function(scope, element, attrs) { 
      initCourseGrid(); 
      $(window).on('resize', function(){ 
       initCourseGrid(); 
      }); 
     } // end jQuery 
    }; 
});

這裏是initCourseGrid()

function initCourseGrid() { 
    // Initialize Responsive Grid 
    var conWidth = $('.courseGrid').width();  
    var col = 4; 
     col = Math.floor(conWidth/540); 
     if(col==0) {col=1;} 
    $('.courseGrid').BlocksIt({ 
     numOfCol: Math.floor(col), 
     offsetX: 3, 
     offsetY: 5, 
     blockElement: '.courseGridItem' 
     }); 
}

當頁面最初加載它看起來亂七八糟，我猜，因爲它沒有足夠的時間來正確地計算每個元素的高度。

當我調整瀏覽器窗口的大小時，所有內容都按原樣渲染，但在初始頁面加載時不顯示。我需要一種方法來檢測所有的指令已加載在頁面上之前我打電話initCourseGrid()

我試過$超時（），但沒有做任何事情。

而且，這裏是怎樣的coursegridjs內容被激活的狀態：

<div class="courseGrid" coursegridjs> 
      <div class="courseGridItem"><coursegriditem title="Course Title" studentcount="342" author="Course Author" imageurl="images/courseBanner.jpg"></coursegriditem></div> 
      <div class="courseGridItem"><coursegriditem title="Course Title 2" studentcount="432" author="GTD" imageurl="images/courseBanner2.jpg"></coursegriditem></div> 
</div>

正如你可以看到正在被另一個叫指令所產生的網格元素coursegriditem

來源

2015-11-10 Jordash

您是否嘗試過在下面的函數進行包裝，？

angular.element(document).ready(function() { 
    initCourseGrid(); 
});

來源退房：How to run function in angular controller on document ready?

來源

2015-11-10 18:08:42 developthewebz

呀，沒有運氣它觸發的功能加載的指令之前。 – Jordash

@Jordash一種哈克，但你說調整大小調用功能正確，正確？你有沒有嘗試模擬一個頁面調整大小與JavaScript超時？我不確定這個問題有多緊急，但至少這會給你一些可用性，直到有人提出更好的解決方案。 – developthewebz

這並不緊急，我正在尋找最好的方式來做到這一點，我想我需要知道整個頁面何時呈現，包括指令。 – Jordash

火jQuery指令在角度後查看完全準備好

回答

相關問題