javascript - 显示 ionic 加载直到数据加载

Question

我正在开发一个使用 Ionic 框架的应用程序，我想在其中显示加载纺车直到数据从 API 完全加载

Controller.js

.controller('PrayersCtrl', function($scope,Prayers,$ionicLoading,$timeout) {
                $ionicLoading.show({
                content: 'Loading',
                animation: 'fade-in',
                showBackdrop: true,
                maxWidth: 200,
                showDelay: 0
              });

        $scope.prayers = Prayers.query();
        $ionicLoading.hide();

    })

和 Services.js

angular.module('starter.services', [])

.factory('Prayers', function($resource) {
    return $resource(base_url+'/wp/v2/posts');
});

在这种情况下，Spinning wheel 甚至不显示，(我的意思是它非常快，以毫秒为单位显示和消失)。比加载数据需要时间，同时它显示空白页面直到加载数据。我想显示纺车，直到数据加载到页面中。

已编辑

我也在 controller.js 中尝试过超时

.controller('PrayersCtrl', function($scope, $stateParams,Prayers,$ionicLoading,$timeout) {
      $ionicLoading.show({
        content: 'Loading',
        animation: 'fade-in',
        showBackdrop: true,
        maxWidth: 200,
        showDelay: 0
      });
      $timeout(function () {
        $ionicLoading.hide();
        $scope.prayers = Prayers.query();
      }, 2000);
    })

但在这种情况下，旋转轮在 2000 毫秒后消失，如代码所示；我想旋转代码直到数据加载完成。

Answer 1

在 controller.js 中，我在查询后添加了一个 $promise 并进行了一些更改以在出现网络错误时显示消息

.controller('PrayersCtrl', function($scope,Prayers,$ionicLoading,$timeout) {
                $ionicLoading.show({
                content: 'Loading',
                animation: 'fade-in',
                showBackdrop: true,
                maxWidth: 200,
                showDelay: 0
              });

        $scope.prayers = Prayers.query().$promise.then(function(result){
         console.log(result);
         $scope.prayers=result;
         $ionicLoading.hide();
        }, function(error){
         console.log(error);
          $ionicLoading.hide();
          $ionicLoading.show({
            template: 'Network Error',
            scope: $scope
          });
          $timeout(function() {
             $ionicLoading.hide();
          }, 2000);
        })
    })

并使服务恢复原状

angular.module('starter.services', [])

    .factory('Prayers', function($resource) {
        return $resource(base_url+'/wp/v2/posts');
    });