javascript - Angularjs 中的服务成功响应后，将数据加载到 DOM 中的延迟太多

Question

我尝试将非常大的数据集加载到 html 表中

1. 点击按钮。

   <a ng-click="get_product()">load data</a>
   

2. 按钮调用函数 get_product

   $scope.get_product = function () {
     // loader image shown
     var get_product = PAYMENTCOLL.getStatusBasedPaymentCollection(); //service call
     get_product.success(function (data)
     {
       $scope.pagedItems = data; //set data into array
     });
     //loader image hide
   };
   

3. 使用ng-repeat将pagedItems数组加载到html表格中。

情况1:

如果数据集较小，当数据完全加载到 DOM 中时，“加载器图像隐藏”。

情况2:

如果数据量很大，“加载器图像隐藏”，但数据仍在加载到 DOM 中(隐藏加载器后加载数据将多花 3-4 秒)。

目的:

我的目的是显示加载程序图像，直到所有数据成功加载到 DOM 中。将所有数据加载到 DOM 后，我想隐藏加载器图像。

如何解决案例 2 问题？提前致谢

Answer 1

您考虑过使用 Promise 吗？

使用$q promise这样您就可以在履行 promise 后设置 $scope.showLoaderImage。

$scope.get_product = function () {
    $scope.showLoaderImage = true;
    PAYMENTCOLL.getStatusBasedPaymentCollection().then(function (e) {
        $scope.showLoaderImage = false;
        $scope.pagesItems = e.data.d;
    }, function (err) {
        //Handle Errors
    })
};

为了反射(reflect) DOM 中 $scope.showLoaderImage 的状态，请使用 ngShow ，如下:

<div ng-show="showLoaderImage">
   <!-- Image here -->
</div>