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

StackOverflow https://stackoverflow.com/questions/23195003

  •  06-07-2023
  •  | 
  •  

Pregunta

LIVE DEMO

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

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

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?

¿Fue útil?

Solución

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

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

DEMO

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top