CODEWITHSUNDEEP
javascriptangularjsfirebase
nashvilleCoder
nashvilleCoder

Reputation: 95

Dynamic updating in Angular w/o using ng-repeat. Possible? (using Firebase)

Is it possible to dynamically update the DOM w/o using ng-repeat in your template? It seems if I am using to load ng-repeat to load a list of objects, anything added or removed from the database will automatically remove itself from the DOM or add itself. Where-as, when I call something with just $scope outside of an ng-repeat, there is no dynamic updating.

I have code that shows the number of users online from Firebase. A console.log will show every time a user logs in, however the scope never updates. Is it possible to refresh this in the DOM to show the new number?

Code example below:

  firebase.database().ref('presence').on('value', function(snap) {
    console.log("# of online users = " + snap.numChildren());
    $scope.usersOnline = snap.numChildren();
  });

Upvotes: 0

Views: 62

Answers (1)

Sam
Sam

Reputation: 960

Since you are using a callback outside of the Angular framework (I'm going to assume Angular 1, correct me if I'm wrong) you'll want to do this to ensure the UI layer knows it needs to update:

firebase.database().ref('presence').on('value', function(snap) {
  $scope.$evalAsync(function() {
     console.log("# of online users = " + snap.numChildren());
     $scope.usersOnline = snap.numChildren();
  });
});

Upvotes: 2

Related Questions