天天看點

AngularJs中,如何在render完成之後,執行Js腳本

AngularJs是Google開源的前端JS架構。使用AngularJs, 我們能夠容易地、健壯的開發出類似于Gmail一樣的單頁Web應用。AngularJs這個新興的MVC前端架構,具有以下特點: MVC, 子產品化,自動化雙向資料綁定,語義化标簽、依賴注入等。

Jquery的主要目的是簡化Js編寫,專注于浏覽器跨平台,主要用來操作DOM.

AngularJs主要關注Html資料的擷取和呈現,以及應對日益複雜的Web應用需求,使得開發龐大的Web應用能夠更加容易。

AnguarJs提供了一些對于Html進行加強的語義标簽(directive),這些标簽在浏覽器加載完頁面後被執行。舉例來說:

AngularJs中,如何在render完成之後,執行Js腳本
AngularJs中,如何在render完成之後,執行Js腳本

上面的ng-repeat,就是一個directive, 相當于一個for循環。在頁面加載完成後,AngularJs會周遊users資料對象,來呈現(render)出這個table中的内容。

當我們使用Jquery結合AngulraJs使用的時候,希望在render完table後,執行一段js腳本,把JqTable應用到該table上。在實際開發中,會經常碰到這樣的需求,希望能夠捕獲到AngularJs渲染完成頁面的事件。

要達到這個目的,我們需要為目前的app自定義directive:

AngularJs中,如何在render完成之後,執行Js腳本
AngularJs中,如何在render完成之後,執行Js腳本

然後,在我們需要監控的地方,加上該directive:

最後,補充上我們需要render完成之後的Js腳本:

AngularJs中,如何在render完成之後,執行Js腳本
AngularJs中,如何在render完成之後,執行Js腳本

繼續閱讀