AngularJS + Firebase: Uncaught Document body has not initialized. Wait to initialize Firebase until after the document is ready

https://stackoverflow.com/questions/23195003

06-07-2023
|

문제

I would like to use AngularFire to bind $rootScope.demo to the Firebase model.

<!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: "/"
    });
});

Unfortunately, I get the following error:

Uncaught Document body has not initialized. Wait to initialize Firebase until after the document is ready.

Why is that? How would you fix it?

BONUS QUESTION

Ideally, I'd like my Firebase model to live in a service rather than the $rootScope, but I wasn't sure how could I load the Firebase model into the service before the app bootstraps. Any ideas?

해결책

Apparently, moving ng-view from body to an inner element solves the issue:

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

DEMO

라이센스 : CC-BY-SA ~와 함께 속성

제휴하지 않습니다 StackOverflow