angularJs リストデータがレンダリングされるかどうかを監視する方法

今回は angularJs のリストデータがレンダリングされたかどうかを監視する方法を説明します 注意点は次のとおりです。
ここ数日間、フロントエンドがデータのレンダリングを実行しているときに、リストやテーブルのレンダリング後に特定の操作が実行されることがよくあります。 angularjs がこの種の問題に対処するための最良の方法は、ディレクティブを使用することです。

まず、命令を定義します:

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>

最後に、データの最後の部分がrendered、$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 中国語 Web サイトの他の関連記事に注目してください。

関連書籍:

ブラウザのレンダリングプロセスの詳細な説明

HTMLのボックスモデルの概要

以上がangularJs リストデータがレンダリングされるかどうかを監視する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。