如何使用 $firebaseObject 摆脱内容闪光

Question

目前我正在我的控制器中加载我的 firebase 数据，如下所示：

app.controller("MyCtrl", function ($scope, $firebaseObject) {
    $scope.users = {};
    var myDB = new Firebase('https://mydb.firebaseio.com/');
    $firebaseObject(myDB.child("users")).$bindTo($scope, "user");
});

通过这种方式，在页面加载后，从 firebase 检索数据会有一段延迟，因此在数据到达之前，页面一开始看起来是空的。这很不方便。

为了防止这种华而不实的行为，我想在我的 $routeProvider 中解析所需的数据，但无法得到承诺。

如何正确去掉内容闪烁？ 有没有办法获得承诺，以便在显示视图之前解析 $firebaseObject？

请不要提供包含 ng-cloak、ng-hide、ng-show 等的快速解决方案

Answer 1

您可以在 resolve 函数中使用 $loaded() 承诺。

app.config(["$routeProvider", function($routeProvider) {
$routeProvider.when("/home", {
  // the rest is the same for ui-router and ngRoute...
  controller: "HomeCtrl",
  templateUrl: "views/home.html",
  resolve: {
    "myObject": ["$firebaseObject", function($firebaseObject) {
      var ref = new Firebase("...");
      return $firebaseObject(ref).$loaded();
    }]
  }
})

https://www.firebase.com/docs/web/libraries/angular/guide/synchronized-objects.html

查看有关身份验证中路由的 AngularFire 文档，以获得有关一般处理带有承诺的路由的更好指导。

https://www.firebase.com/docs/web/libraries/angular/guide/user-auth.html

如何使用 $firebaseObject 摆脱内容闪光

How to get rid of content flash using $firebaseObject

angularjs

firebase

angularfire