Angular & Firebase Liste nicht aktualisiert

Question

Ich bin neu mit beiden Angular & Firebase. Ich habe versucht, eine Fabrik zu erstellen, um meine Liste der Stationen zu aktualisieren, aber die Liste scheint nicht zu aktualisieren. Wenn ich den Factory-Code firebase.database... in meinem Controller ausführen, funktioniert es aber gut.

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(); 
      }) 
     } 
    } 
}) 

Was mache ich falsch? Soll die ng-repeat="(key,station) in stations" Liste nicht geändert werden, nachdem die Fabrik die neuen Daten zurückgibt?

Auch ich habe etwas in ein paar Tutorials bemerkt. Was ist der Unterschied zwischen den unten 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(); 
    }]) 

Answer 1

, da Sie die Feuerbasis Ergebnis mit einem Schräg Versprechen nicht einwickeln haben, kann der Winkel Umgebung nicht da bemerkt neue Ergebnisse angekommen sind, haben Sie zwei Möglichkeiten:

1. Angular Fire verwendet, die Winkel Bindungen liefern für Feuerbasis

2. wickeln Sie das Rückergebnis mit einem $q Versprechen:

   //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; 
        } 
       } 
   }) 
   

Answer 2

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 ist besser für minification von Browsern durchgeführt, die so etwas wie führen:

controller2 .min.js

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

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