Javascript 显示离子负载直到加载数据

我正在使用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();

    })

.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);
    })

和服务.js

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

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

在这种情况下，纺车甚至不显示，（我的意思是它是如此之快，它显示和消失在毫秒）。加载数据需要时间，同时在加载数据之前显示空白页。我想显示纺车，直到数据加载到页面中

编辑 我还在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();

    })

.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毫秒后消失，如代码所示；

---

我想旋转代码直到加载完数据。

尝试使用此解决方案

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

        $scope.prayers = Prayers.query().then(function(result){
         console.log(result);
         $ionicLoading.hide();
        }, function(error){
         console.log(error);
          $ionicLoading.hide();
        })          
    })

在您的工厂中，将代码编辑为

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

.factory('Prayers', function($resource, $q) {
  var self = this;
  self.query = function(){
  var defer = $q.defer();
   $resource(base_url+'/wp/v2/posts').then(function(result){
   console.log(result);
   defer.resolve("success");
   }, function(error){
   console.log(error);
   defer.reject("error");
  })
   return defer.promise;
  }
  return self;


});

---

在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');
    });

---

穆罕默德，我得仔细考虑一下你的答案才能让它对我有用。这是我的控制器

.controller('PrayersCtrl', function($scope, $ionicLoading, Prayers, $timeout) {
  $ionicLoading.show({
    template: '<ion-spinner icon="spiral" class="spinner-positive"></ion-spinner> <br>Loading...',
    noBackdrop: true,
    animation: 'fade-in'
  });
  Prayers.query().$promise.then(function(result){
    $scope.prayers = result;
    $ionicLoading.hide();
  }, function(error) {
    // error handling here
    $ionicLoading.hide();
    $ionicLoading.show({
      template: "unable to connect",
      noBackdrop: true
    });
    $timeout(function() {
       $ionicLoading.hide();
    }, 2000);
  })
})

.controller（'prairsctrl'，函数（$scope、$ionicload、prairs、$timeout）{
$ionicLoading.show({
模板：“
正在加载…”，
noBackdrop：没错，
动画：“淡入”
});
prives.query（）.$promise.then（函数（结果）{
$scope.prayers=结果；
$ionicLoading.hide（）；
}，函数（错误）{
//这里的错误处理
$ionicLoading.hide（）；
$ionicLoading.show({
模板：“无法连接”，
noBackdrop：是的
});
$timeout（函数（）{
$ionicLoading.hide（）；
}, 2000);
})
})

它在没有数据的情况下继续旋转，并出现错误“Prayers.query（…）。然后不是一个函数“当您将数据获取为成功或错误时，它将隐藏”Prayers.query（…）。然后不是一个函数“当在控制台上检查时出错”。您可以发布您的工厂代码。。。所以我会尽量让你知道让我们知道这正是我想要的。为了让它对我起作用，我不得不稍微考虑一下上面的内容。见下面我的答案。