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

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

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

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

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

返回列表承诺的My services.js部分如下：

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

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

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

---

您不需要在承诺中解析

$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（）

以了解何时关闭

加载服务

您可以在工厂或服务的实例中使用$loaded来显示加载消息，并在加载数据时将其隐藏

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

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

.controller('TrendingpackagesCtrl', function($scope, Trendingpackages, $ionicLoading) {


  var trendingpackages = [];


  $ionicLoading.show({
    template: 'Loading...'
  });


  $scope.trendingpackages = Trendingpackages;

  Trendingpackages.$loaded().then(function(){
    $ionicLoading.hide();
  })

})

嗯…哈哈，很高兴知道这个，哈哈！我要试试看！谢谢你，大卫！是的！有关
$loaded（）
.Awesome的更多详细信息，请查看我的更新答案。非常感谢。我对这一切还是新手，所以我还是在写蹩脚的代码。哈哈。我们都从某个地方开始：）这有帮助吗？