AngleJs 목록 데이터가 렌더링되는지 여부를 모니터링하는 방법

이번에는 angularJs리스트 데이터가 렌더링되었는지 모니터링하는 방법과,AngularJs리스트 데이터가 렌더링되었는지 모니터링하는 방법을 보여드리겠습니다. 다음은 실제 사례입니다.

프런트엔드에서 데이터 렌더링을 할 때, 최근에는 목록과 테이블이 렌더링된 후 클릭과 선택 작업이 수행되는 경우가 종종 있습니다. 이러한 유형의 문제를 처리하기 위한 Anglejs의 경우 가장 좋은 방법은 지시어를 사용하는 것입니다.

　먼저 명령어를 정의합니다.

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.$on()은 이벤트를 수신하여 $emit 또는 $brodercast가 이벤트(명령)를 다시 전송하는지 모니터링합니다. 이벤트가 다시 전송되면 데이터가 렌더링되었으며 다른 작업을 수행할 수 있음을 의미합니다. 미래에.

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

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

관련 읽기:

브라우저 렌더링 프로세스에 대한 자세한 설명

HTML의 상자 모델 요약

위 내용은 AngleJs 목록 데이터가 렌더링되는지 여부를 모니터링하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!