監(jiān)聽angularJs列表數(shù)據(jù)是否渲染完畢的方法示例

更新時間：2018年11月07日 10:17:53 作者：前端攻城小牛

前端在做數(shù)據(jù)渲染的時候經(jīng)常會遇到在數(shù)據(jù)渲染完畢后執(zhí)行某些操作，這篇文章主要介紹了監(jiān)聽angularJs列表數(shù)據(jù)是否渲染完畢的方法示例，非常具有實用價值，需要的朋友可以參考下

前端在做數(shù)據(jù)渲染的時候經(jīng)常會遇到在數(shù)據(jù)渲染完畢后執(zhí)行某些操作，這幾天就一直遇到在列表和表格渲染完畢后，執(zhí)行點擊和選擇操作。對于angularjs處理這類問題，最好的方式就是指令 directive。

首先，定義指令：

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

其次，指令定義完畢后，需要將指令添加到迭代的標(biāo)簽內(nèi)，此處是<tr>標(biāo)簽

<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>

最后，在最后一條數(shù)據(jù)渲染完畢后，brodercast是向子級scope傳送事件(命令)。而on()是監(jiān)聽事件，監(jiān)聽brodercast是否將事件(命令)傳送回來，若事件已傳送回來，則表示數(shù)據(jù)已經(jīng)渲染完畢，就可以執(zhí)行以后的其他操作了

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

在沒有angularJs的時候一般通過監(jiān)聽onLoad事件來確定頁面是否加載完成。但在使用angularJs來渲染頁面時，onLoad事件不能保證angularJs是否完成了對頁面的渲染。最常見的情況就是用angularJs來加載某個數(shù)據(jù)Table時，我們得等這個Table加載完之后對Table上的數(shù)據(jù)進行操作，但因為這個Table是由AngularJs渲染的，所以得找到某個方法獲得AngularJs渲染完畢后的事件。這也就是為什么onload事件在angularJs框架上數(shù)據(jù)刷新不執(zhí)行的一個原因，因為angularJs是數(shù)據(jù)驅(qū)動，根據(jù)數(shù)據(jù)的更新進行頁面的刷新，而整體頁面已經(jīng)加載完成(數(shù)據(jù)更新，angularJs數(shù)據(jù)渲染，頁面不會重新加載)，故onload事件判定頁面沒有變化，所以不予執(zhí)行！

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: