Heim >Web-Frontend >js-Tutorial >So überwachen Sie, ob AngularJs-Listendaten gerendert werden
Dieses Mal zeige ich Ihnen, wie Sie AngularJs überwachen, ob die Listendaten gerendert werden, und wie Sie überwachen, ob die AngularJs-Listendaten gerendert werden. Welche Vorsichtsmaßnahmen gibt es? Hier sind die praktischen Fälle . Lasst uns einmal einen Blick darauf werfen.
Wenn das Front-End Daten rendert, kommt es häufig vor, dass bestimmte Vorgänge nach dem Rendern der Daten ausgeführt werden. In den letzten Tagen wurden Klick- und Auswahlvorgänge nach Listen und Tabellen ausgeführt werden gerendert. Damit AngularJS diese Art von Problem lösen kann, ist die Verwendung von Direktiven der beste Weg.
Definieren Sie zunächst die Anweisung:
app.directive('onfinishrenderfilters', function ($timeout) { return { restrict: 'A', link: function (scope, element, attr) { if (scope.$last === true) { //判断是否是最后一条数据 $timeout(function () { scope.$emit('ngRepeatFinished'); //向父级scope传送ngRepeatFinished命令 }); } } }; });
Zweitens müssen Sie nach der Definition der Anweisung die Anweisung zum Iterations-Tag hinzufügen. Hier ist das a34de1251f0d9fe1e645927f19a896e8-Tag
<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>
Abschließend, nachdem das letzte Datenelement gerendert wurde, wird $emit verwendet, um Ereignisse (Befehle) an den übergeordneten Bereich zu senden, und $brodercast wird verwendet, um Ereignisse (Befehle) an den untergeordneten Bereich zu senden. Und $scope.$on() wartet auf Ereignisse und überwacht, ob $emit oder $brodercast das Ereignis (den Befehl) zurücksendet. Wenn das Ereignis zurückgesendet wurde, bedeutet dies, dass die Daten gerendert wurden und andere Vorgänge ausgeführt werden können in der Zukunft.
$scope.$on('ngRepeatFinished', function (ngRepeatFinishedEvent) { var btnList = $("input[name='btSelectItem']"); btnList.eq(0).attr("checked","checked"); $scope.provider.detalOutlet(); });
Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Verwandte Lektüre:
Detaillierte Erläuterung des Browser-Rendering-Prozesses
Zusammenfassung des Box-Modells in HTML
Das obige ist der detaillierte Inhalt vonSo überwachen Sie, ob AngularJs-Listendaten gerendert werden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!