AngularJS + Firebase:Uncaught Document主体尚未初始化。等待文档准备好后再初始化Firebase

时间:2014-04-21 09:57:42

标签: angularjs firebase angularfire

LIVE DEMO

我想使用AngularFire将$rootScope.demo绑定到Firebase模型。

Here is what I'm trying to do:


<!DOCTYPE html>
<html ng-app="Demo">
<head>
  <meta charset="utf-8">
  <title>Demo</title>

  <script src="//code.angularjs.org/1.3.0-beta.5/angular.js"></script>
  <script src="//code.angularjs.org/1.3.0-beta.5/angular-route.js"></script>
  <script src='//cdn.firebase.com/js/client/1.0.11/firebase.js'></script>
  <script src="//cdn.firebase.com/libs/angularfire/0.7.1/angularfire.min.js"></script>
</head>
<body ng-view>
</body>
</html>

angular.module("Demo", ["ngRoute", "firebase"])
.config(function($routeProvider, $locationProvider) {
  $locationProvider.html5Mode(true);

  var resolve = {
    whatever: function ($q, $rootScope, $firebase) {
      var defer = $q.defer();

      // I use a different URL in my app as you might guess
      var demoRef = new Firebase("https://demo.firebaseio.com");

      $firebase(demoRef).$bind($rootScope, "demo").then(function() {
        defer.resolve($rootScope.demo);
      });

      return defer.promise;
    }
  };

  $routeProvider
    .when("/", {
      controller: function($scope) {
        $scope.message = "Hello World!";
      },
      template: "<div>{{ message }}</div>",
      resolve: resolve
    })
    .otherwise({
      redirectTo: "/"
    });
});

不幸的是,我收到以下错误:

  

Uncaught Document正文尚未初始化。等待初始化   Firebase直到文档准备好之后。

为什么?你会如何解决它?


奖金问题

理想情况下,我希望我的Firebase模型能够使用服务而不是$rootScope,但我不确定如何在应用程序引导之前将Firebase模型加载到服务中。有什么想法吗?

1 个答案:

答案 0 :(得分:3)

显然,将ng-viewbody移到内部元素可以解决问题:

<body>
  <div ng-view></div>
</body>

DEMO