angularjs -- 監聽angularJs列表數據是否渲染完畢

前端在作數據渲染的時候常常會遇到在數據渲染完畢後執行某些操做，這幾天就一直遇到在列表和表格渲染完畢後，執行點擊和選擇操做。對於angularjs處理這類問題，最好的方式就是指令 directive。

  首先，定義指令：

app.directive('onfinishrenderfilters', function ($timeout) {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            if (scope.$last === true) {    //判斷是不是最後一條數據
                $timeout(function () {
                    scope.$emit('ngRepeatFinished'); //向父級scope傳送ngRepeatFinished命令
                });
            }
        }
    };
});
複製代碼

 其次，指令定義完畢後，須要將指令添加到迭代的標籤內，此處是標籤

<div class="fixed-table-container" style="margin-right: 0px;">
    <table class="table table-hover lamp-table">
        <thead>
        <tr>
            <th></th>
            <th style="text-align: center; " data-field="name_device-id" tabindex="0"
                ng-repeat="i in provider.geoZoneListHead track by $index" ng-hide=i.bol>
                <div class="th-inner sortable " style="padding-right: 10px">{{i.name}}
                </div>
                <div class="fht-cell" style="width: 101px;"></div>
            </th>

        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="i in provider.geoZoneList" onfinishrenderfilters>
            <td><input data-index="0" name="btSelectItem" type="radio"
                       value="{{$index}}" ng-click="selectInput($index)"></td>
            <td class="nameId0">{{$index+1}}</td>
            <td class="nameId1">{{i.geoZoneName}}</td>
            <td class="nameId2">{{i.description}}</td>
            <td class="nameId3">{{i.totalNumberOfMembers}}</td>
            <td class="nameId4">{{i.country}}</td>
            <td class="nameId5">{{i.lastUpdateDate}}</td>
        </tr>
        </tbody>
    </table>
</div>//歡迎加入全棧開發交流羣一塊兒學習交流：864305860
複製代碼

最後，在最後一條數據渲染完畢後，brodercast是向子級scope傳送事件(命令)。而on()是監聽事件，監聽brodercast是否將事件(命令)傳送回來，若事件已傳送回來，則表示數據已經渲染完畢，就能夠執行之後的其餘操做了

$scope.$on('ngRepeatFinished', function (ngRepeatFinishedEvent) {
    var btnList = $("input[name='btSelectItem']");
    btnList.eq(0).attr("checked","checked");
    $scope.provider.detalOutlet();
});
複製代碼

在沒有angularJs的時候通常經過監聽onLoad事件來肯定頁面是否加載完成。但在使用angularJs來渲染頁面時，onLoad事件不能保證angularJs是否完成了對頁面的渲染。最多見的狀況就是用angularJs來加載某個數據Table時，咱們得等這個Table加載完以後對Table上的數據進行操做，但由於這個Table是由AngularJs渲染的，因此得找到某個方法得到AngularJs渲染完畢後的事件。 這也就是爲何onload事件在angularJs框架上數據刷新不執行的一個緣由，由於angularJs是數據驅動，根據數據的更新進行頁面的刷新，而總體頁面已經加載完成(數據更新，angularJs數據渲染，頁面不會從新加載)，故onload事件斷定頁面沒有變化，因此不予執行！

本次給你們推薦一個免費的學習羣，裏面歸納移動應用網站開發，css，html，webpack，vue node angular以及面試資源等。 對web開發技術感興趣的同窗，歡迎加入Q羣：864305860，無論你是小白仍是大牛我都歡迎，還有大牛整理的一套高效率學習路線和教程與您免費分享，同時天天更新視頻資料。 最後，祝你們早日學有所成，拿到滿意offer，快速升職加薪，走上人生巔峯。****