Why response of firebase realtime database not reflect to html in angularjs

Question

I'm trying to display response of firebase realtime database to HTML page with AngularJS as follow {{ pps }}.

Controller.js

firebase.database().ref('/activeUsers/9791009080').once('value').then(function(snapshot) {
    $scope.pps = (snapshot.val() && snapshot.val().msisdn) || 'Anonymous';
    console.log($scope.pps);
});

index.html

<h1>{{ pps }}</h1>

Problem is frontend HTML value is not reflected when I've found value inside console.log Please let me know what I've missed above code.

Luillyfe · Accepted Answer · 2018-04-26 05:28:22Z

2

Use $scope.$apply to tell angular about the changes.

firebase.database().ref('/activeUsers/9791009080').once('value').then(function(snapshot) {
  $scope.$apply(() => {
    $scope.pps = (snapshot.val() && snapshot.val().msisdn) || 'Anonymous';
    console.log($scope.pps);
  });
});

answered Apr 26, 2018 at 5:28

Luillyfe

6,9828 gold badges39 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Praveen Kumar A X · Accepted Answer · 2018-04-26 05:30:14Z

1

If your new to using Angular 1 + Firebase, I would recommend you to try out AngularFire. It does a better integration than your vanilla angular approach.

Check it out here.

https://github.com/firebase/angularfire/blob/master/docs/quickstart.md

Peace.

answered Apr 26, 2018 at 5:30

Praveen Kumar A X

4313 silver badges6 bronze badges

Comments

USS · Accepted Answer · 2018-04-26 05:41:20Z

1

You can try below solution.

firebase.database().ref('/activeUsers/9791009080').once('value').then(function(snapshot) {
    $timeout(function() {
        $scope.pps = (snapshot.val() && snapshot.val().msisdn) || 'Anonymous';
    });
});

Now, why this?
Actually, the event will occur $apply scope as out scope so need to tell angular that there is some event to handle. You can do this via $timeout or you can try $apply scope.

Here, I'm using $timeout because this will doesn't throw an error even though it will maintain the flow while event from firebase occured.

answered Apr 26, 2018 at 5:41

USS

4705 silver badges16 bronze badges

Collectives™ on Stack Overflow

Why response of firebase realtime database not reflect to html in angularjs

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related