CODEWITHSUNDEEP
angularjsfirebase
Chipe
Chipe

Reputation: 4811

Angular JS firebase.(child_added) not rendering on page

I have entries in my firebase database that I am trying to get to show up on the html page. The console.log shows the children in the database, but it is not displaying on the page. Here is the code I have:

DB:

quiz-show  
    user
        -JuYaVjjm0zY59vK48aR: "user1"
        -JuYaXzrT2-_pfhpr58o: "user2"
        -JuYaZd_oS-hi5zqYLhX: "user3"
        -JuYaaNNd24Icruv18LH: "user4"

Controller:

'use strict';

angular.module('phoneQuizAnswer')
    .controller('testCtrl', function ($scope, $firebaseObject) {
        var fireRef = new Firebase('https://[myfirebase]/users');
        $scope.h1 = 'responses:';
        fireRef.on('child_added', function(childSnapshot, prevChildKey) {
            console.log(childSnapshot.val());
            $scope.users = childSnapshot.val();
        });
    });

html:

{{h1}}
{{users}}

console.log shows

user1
user2
user3
....

{{h1}} renders correctly, but {{users}} does not render anything. So how can I get each to show up on the page?

Upvotes: 0

Views: 284

Answers (1)

Frank van Puffelen
Frank van Puffelen

Reputation: 599166

Firebase asynchronously loads and monitors data. Whenever (new or updated) data is available, your callback function is fired. Unfortunately at that point, AngularJS typically isn't ready to accept the changes anymore. That's why Firebase created AngularFire, which automatically notifies AngularJS when changes happen.

You seem to be partially using AngularFire, but not for this construct. I recomment either always using AngularFire for data that needs to be bound to the $scope or never using AngularFire. The choice is yours, but be consistent.

Using AngularFire:

        var fireRef = new Firebase('https://[myfirebase]/users');
        $scope.h1 = 'responses:';
        $scope.users = $firebaseArray(fireRef);

Not using AngularFire:

        var fireRef = new Firebase('https://[myfirebase]/users');
        $scope.h1 = 'responses:';
        fireRef.on('value', function(childSnapshot, prevChildKey) {
          $timeout(function() {
            console.log(childSnapshot.val());
            $scope.users = childSnapshot.val();
          };
        });

The $timeout construct tells AngularFire that you're modifying the $scope.

Note that binding arrays to the scope is covered in every piece of AngularFire documentation we have: the AngularFire quickstart, the AngularFire guide and the AngularFire API docs. Please read them, they contain many other useful bits.

Upvotes: 3

Related Questions