AngluarJSとFirebase、サービスを使用してテーブルを更新する

Question

私はfirebaseデータベースから取得したデータで更新したいテーブルがあります。 firebase呼び出しが約束を返し、データベース呼び出しが非同期で実行されたことがわかりますが、.thenメソッドでも非同期データをテーブルビューに抽出できないようです。

非同期部分を克服するために、私はサービスを使用しようとしました（この回答Update scope value when service data is changedに基づいています）。テストコールバックメソッドaddValue()を使用してデータの追加をテストしました。しかし、firebaseクエリの.then（）の内部でこのコールバックを使用すると、サービスのデータは更新されますが、ビューでは更新されません。

routerApp.controller('leaderboardCtrl', function($scope, service) { 

      $scope.data = service.data; 

      service.getLeaderboard('Test1', 'TestGroup', 10); 
      //service.getValues(); 


}).factory("service", function($rootScope, $q) 
{ 
    return new (function AsyncTest(){ 
    this.data=[ 
     {name : "Sam" , score : 190} 
    ] 
    this.getValues=function() 
    { 
     var self=this; 
     //self.data.push({name : "Sam" , score : 180}); 
     self.addValue(); 
     self.count++ 
    }, 
    this.count=0, 

    this.addValue =function(){ 
     var self=this; 
     self.data.push({name : "Sam" , score : 180}); 
    } 

    this.getLeaderboard = function(test, groupName, limit){ 
     var self=this; 
     var uid = currentUser.uid; 



    firebase.database().ref('/groupMembers/' + groupName).once('value').then(function(snapshot) { 
     for(var user in snapshot.val()){ 
      firebase.database().ref('/tests/' +test + '/users/' + user).orderByChild("score").limitToLast(limit).once('value').then(function (snapshot) { 
         console.log('----LEADERBOARD----'); 
         console.log(snapshot.val()); 
         self.addValue(); 
         console.log(self.data); 

      }); 
      } 
     }); 
    } 
    })(); 

}); 

Answer 1

firebaseを使用する場合は、角にしばしば起こります。 addValue()メソッドでは、プッシュロジックの後に$scope.apply()を追加してみてください。

例：

this.addValue=function(){ 
    var self=this; 
    self.data.push({name : "Sam" , score : 180}); 
    $scope.apply(); 
} 

$scope.apply()は、お使いのコントローラで行われていただきまし反映するために、ビューを更新するために使用されます。

希望します。