当firebase从实时数据库中检索数据时加载指示符

Question

我有一个带有ng-repeat div的simpel angular.js网站。在该div中，它重复来自firebase实时数据库的数据。

当页面加载时，ng-repeat对象中没有任何内容，因此div为空。但是当firebase进行了websocket连接时，数据显示在ng-repeat中。 现在我的问题是，我可以在页面加载并且firebase已下载数据的时间内显示加载指示符。因为现在页面加载，你有一个空div。 1秒后，firebase已将数据加载到。

1个无效的解决方案

$scope.$watch('messages', function() {
 if ($scope.messages.$resolved === true) {
     document.getElementById('loader').style.display = 'none';
 }
}, true);

此解决方案的问题在于，如果没有数据显示，则加载div将永远保留在那里。

我认为可能有效的解决方案

将来自firebase数据库的最新响应存储在cache.json文件中。当用户加载您首先加载该文件的页面时，之后将其替换为firebase数据库中的实际数据。

Answer 1

没有更多代码，很难提供帮助。如果您可以粘贴如何填充真正有用的消息。我会假设您正在使用angularFire，所以这是您的答案：

$scope.loading = true;
$firebaseArray(...child('messages')).$loaded().then(function(){
    $scope.loading = false;
});

这在调用之前将加载设置为true，然后在之后将其设置为false。