从$ rootScope存储和访问快照值

Question

In my global controller (assigned to the body in html) I have the following code to grab a snapshot of firebase one time.

ref.once('value', function(snapshot){
    var data = snapshot;
}).then(function(data){
    $rootScope.content = data.val();
});

I am using the content in my HTML templates to render them. All the questions I found had resulted in putting the "then" code inside the callback.

Literally all I need to do is be able to grab a snapshot one time and store it on $rootScope.content and access it outside of the function, ie anywhere in my app.

I'm pretty sure it's because everything is rendering prior to firebase returning anything, I'm just not sure the best way to tell it to wait.

Thank you in advance.

Answer 1

Try:

ref.once('value', function(snapshot){
    $rootScope.content = snapshot.val();
});

Or:

ref.once('value').then(function(snapshot){
    $rootScope.content = snapshot.val();
});

From the once() docs:

Return Value Returns a Promise that can optionally be used instead of the successCallback and failureCallback to handle success and failure.

Answer 2

I think your second line var data = snapshot; may be the problem? If all you want is to get the whole database and assign it to a object called $rootScope.content , or anything else, the below would work. I don't use angular but $rootScope.content would need to be an object, aka var foo = {} would be able to take snapshot.val() . Note that snapshot.val() is full of stuff other than just your JSON formatted data and you will have to extract out your individual nodes by calling the property names (the key's), eg snap.val().firstName to get Bob .

firebase.database().ref('/').once('value').then(function(snap) {
  $rootScope.content = snap.val();
});