javascript - 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 将永远停留在那里。

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

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

Answer 1

如果没有更多代码，很难提供帮助。如果您可以粘贴如何填充消息，那将非常有帮助。我假设您正在使用 angularFire 来实现此目的，所以这是您的答案:

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

这会在调用之前将loading设置为true，然后在调用后立即设置为false。