Question

我正在使用离子框架处理应用程序，其中我想显示加载旋转轮，直到数据从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');
});

在这种情况下，旋转轮甚至不显示，（我的意思是它太快以至于显示并以毫秒消失）。加载数据需要时间，同时在加载数据之前显示空白页。我想显示纺车，直到数据加载到页面中。请帮助我

编辑： 我还在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 ms后消失，如代码所示我想旋转代码直到数据完成加载。

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

Answer 2

穆罕默德，我不得不稍微调整你的答案，让它为我工作。这是我的控制器。

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

Answer 3

尝试使用此解决方案

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


});

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

3 个答案: