javascript - 在 Ionic 中从 Firebase 获取列表期间 $ionicLoading 未显示

Question

我有一个 Firebase 数据存储，可以访问它来加载列表。我想显示一个 $ionicLoading 指示器，直到列表完全加载并实际显示在页面上。

出于某种原因，似乎 $ionicLoading 确实出现了，但时间太短以至于根本没有显示。然而在页面上，列表仍然需要 1-3 秒的时间来加载和显示。我这样做错了吗？

我的controllers.js部分如下:

.controller('ListCtrl', function($scope, ListService, LoaderService) {
  var message="Loading list...";
  LoaderService.showLoader(message);

  ListService.listAll().then(function(data){
    $scope.list = data;
    LoaderService.hideLoader();
  });
})

返回列表 promise 的 services.js 部分如下:

.factory('ListService', function($q, $firebaseArray) {

    var refList = 
    new Firebase('https://my-list-db.firebaseIO.com/coupons');

    return {
        listAll: function() {
            var deferred = $q.defer();
            var items = $firebaseArray(refList);
            deferred.resolve(items);
            return deferred.promise;
        }
    };
})

.factory('LoaderService', function($ionicLoading){
    //var LoadingObj= new $ionicLoading;

    return {
        showLoader: function(loadingMessage){
            //loadingMessage="Loading List...";
            $ionicLoading.show({
                template: loadingMessage
            });
        },

        hideLoader: function(){
            $ionicLoading.hide();
        }
    };
});

Answer 1

您不需要解析 Promise 中的 $firebaseArray()，因为它在使用 $loaded() 加载时会返回一个 Promise。

试试这个:

.constant('FirebaseUrl', 'https://my-list-db.firebaseIO.com/')
.service('rootRef', ['FirebaseUrl', Firebase])
.factory('ListService', function(rootRef, $firebaseArray) {
   var refList = rootRef.child('coupons');
   return $firebaseArray(refList);
})
.controller('ListCtrl', function($scope, ListService, LoaderService) {
   var message = "Loading list...";
   LoaderService.showLoader(message);

   $scope.list = ListService;

   $scope.list.$loaded.then(function(data){
      LoaderService.hideLoader();
   });
})

但是，您应该知道通常不需要$loaded()。因为当数据加载时，AngularFire 会触发 $digest 循环，数据就会出现在屏幕上。因此，您可以将 ListService 分配给作用域，然后解析 $loaded() 以了解何时关闭 LoaderService。

<强> Check out the AngularFire API for more information.