怎麼監聽angularJs列表資料是否渲染完畢

這次帶給大家怎麼監聽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>

最後，在最後一筆資料渲染完畢後，$emit用來傳送事件(指令)(指令)，$brodercast是向子級scope傳送事件(指令)。而$scope.$on()是監聽事件，監聽$emit或$brodercast是否將事件(命令)傳送回來，若事件已傳送回來，則表示資料已經渲染完畢，就可以執行以後的其他操作了。  

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

相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

相關閱讀：

詳解瀏覽器渲染流程

HTML中關於盒子模型的總結

以上是怎麼監聽angularJs列表資料是否渲染完畢的詳細內容。更多資訊請關注PHP中文網其他相關文章！