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

AngularJs是Google開源的前端JS框架。使用AngularJs， 我們能夠容易地、健壯的開發出類似於Gmail一樣的單頁Web應用。AngularJs這個新興的MVC前端框架，具有以下特點: MVC， 模塊化，自動化雙向數據綁定，語義化標籤、依賴注入等。

AngularJs和Jquery的有什麼不同?

Jquery的主要目的是簡化Js編寫，專注於瀏覽器跨平臺，主要用來操作DOM.

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

AngularJs呈現頁面的原理

AnguarJs提供了一些對於Html進行加強的語義標籤(directive)，這些標籤在瀏覽器加載完頁面後被執行。舉例來說:

Id

Name

Salary

{{user.Id}}

{{user.Name}}

{{user.Salary}}

上面的ng-repeat，就是一個directive， 相當於一個for循環。在頁面加載完成後，AngularJs會遍歷users數據對象，來呈現(render)出這個table中的內容。

如何實現在render完成之後，執行Js腳本

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

要達到這個目的，我們需要爲當前的app自定義directive:

app.directive(‘onFinishRenderFilters’,function($timeout){
        return {
            restrict: ‘A’，
                link: function(scope， element， attr) {
                if (scope.$last === true) {
                    $timeout(function() {
                        scope.$emit(‘ngRepeatFinished’);
                    });
                }
            }
        };
});

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

{{user.Id}}

{{user.Name}}

{{user.Salary}}

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

$scope.$on('ngRepeatFinished'，function(ngRepeatFinishedEvent) {
    //下面是在table render完成後執行的js
    var table = $("#leaderBoard").dataTable({
        bJQueryUI: true，
            "sScrollX": '100%'，
    });
});