在加载数据之前显示Ionic加载

Show Ionic loading till data loaded

本文关键字：加载 显示 Ionic 数据      更新时间：2023-10-06

我正在使用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毫秒后消失，如代码所示；我想旋转代码直到数据完成加载。

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

Muhammad，我不得不在推特上发布你的答案，让它为我工作。这是我的控制器。

.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('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;

});
相关文章：