Angular & Firebase list not updating

Question

i'm new with both Angular & Firebase. I've been trying to create a factory to update my list of stations but the list just won't seem to update. When i run the factory code firebase.database... in my controller it works fine though.

controller

.controller('DashCtrl', function ($scope,Stations) {

        $scope.stations = [];
        $scope.stations = Stations.getStations();
    })

services

.factory('Stations', function() {
    return {
        getStations : function(){
            firebase.database().ref('stations').once('value',function(snapshot){
                console.log(snapshot.val());
                return snapshot.val();
            })
        }
    }
})

What am i doing wrong? Isn't the ng-repeat="(key,station) in stations" list supposed to change after the factory returns the new data ?

Also I've been noticing something in a few tutorials. What is the difference between the below 2 inits.

.controller('DashCtrl', function ($scope,Stations) {

        $scope.stations = [];
        $scope.stations = Stations.getStations();
    })

.controller('DashCtrl', [$scope,Stations,function ($scope,Stations) {

        $scope.stations = [];
        $scope.stations = Stations.getStations();
    }])

Just to make it clear for the edit, the problem isn't with the databaes not returning anything rather than updating the ng-repeat list on return — LefterisL
– LefterisL, Commented Aug 8, 2016 at 15:05

MarkoCen · Accepted Answer · 2016-08-08 15:14:25Z

1

since you didn't wrap the firebase result with an Angular promise, the angular environment cannot notice there are new results arrived, you have two solutions:

using Angular Fire which provide angular bindings for firebase

wrap the return result with an $q promise:

//controller 
.controller('DashCtrl', function ($scope,Stations) {
    $scope.stations = [];
    Stations.getStations().then(function(results){
        $scope.stations = results;
    });
 })

//service
.factory('Stations', function($q) {
    return {
        getStations : function(){
            var defer = $q.defer();
            firebase.database().ref('stations').once('value').then(function(snapshot){
                defer.resolve(snapshot.val());
            }).catch(function(error){
                defer.reject(error);
            })
            return defer.promise;
        }
    }
})

answered Aug 8, 2016 at 15:14

MarkoCen

2,35417 silver badges25 bronze badges

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

1 Comment

LefterisL Over a year ago

ok I got it, but i'll be using this one if i want to use once. What about on ? how could i let know the controller to update the list from the Stations factory ?

Erdem İnanç · Accepted Answer · 2016-09-22 14:02:55Z

1

controller #1

.controller('DashCtrl', function ($scope,Stations) {

    $scope.stations = [];
    $scope.stations = Stations.getStations();
})

controller #2

.controller('DashCtrl', [$scope,Stations,function ($scope,Stations) {

    $scope.stations = [];
    $scope.stations = Stations.getStations();
}])

controller #2 is better for minification done by browsers which will result something like:

controller2.min.js

.controller('DashCtrl', [a,b, function(a,b) {

a.stations = [];
a.stations = b.getStations();
}])

answered Sep 22, 2016 at 14:02

Erdem İnanç

1213 silver badges6 bronze badges

Collectives™ on Stack Overflow

Angular & Firebase list not updating

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related