Heim >Web-Frontend >js-Tutorial >So überwachen Sie, ob AngularJs-Listendaten gerendert werden

So überwachen Sie, ob AngularJs-Listendaten gerendert werden

php中世界最好的语言
php中世界最好的语言Original
2018-02-27 10:11:591720Durchsuche

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(&#39;ngRepeatFinished&#39;, function (ngRepeatFinishedEvent) {    var btnList = $("input[name=&#39;btSelectItem&#39;]");
    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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn