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

我返回列表保证的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

您无需在承诺中解析$firebaseArray()，因为它在加载$loaded()时会返回承诺。

请改为尝试：

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

Answer 2

您可以使用$ loaded与工厂或服务的实例一起显示加载消息，并在加载数据时隐藏它。

<div id="outer">

  <p>top of #outer</p>

  <div id="inner">
    #inner
  </div>

  <div id="push"></div>
</div>

然后你可以在控制器中使用它：

.factory("Trendingpackages", function($firebaseArray) {
   var TrendingpackagesRef = new Firebase("https://brilliant-torch-4678.firebaseio.com/items");
   return $firebaseArray(TrendingpackagesRef);
 })

在离子的Firebase列表获取期间，$ ionicLoading未显示

2 个答案: