AngluarJS和Firebase，使用服務更新表格

我有一張表格，我想更新從我的Firebase數據庫獲取的數據。我知道firebase調用返回一個承諾和數據庫調用，然後運行異步，但即使在.then方法，我似乎無法將異步數據提取到我的表視圖。AngluarJS和Firebase，使用服務更新表格

爲了克服異步部分，我試圖使用服務（根據這個答案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); 

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

});

來源

2016-09-14 Sam Palmer

建議尋找使用'angularFire'。所有使用Firebase的事件都需要通過角度來運行摘要，因爲數據正在角度上下文之外進行檢索。 'angularfire'使3路綁定非常簡單 – charlietfl

謝謝我會考慮這一點！ –

使用火力時，這常常在角發生。在您的addValue()方法中，嘗試在推送邏輯之後添加$scope.apply()。

例子：

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

$scope.apply()用於更新視圖以反映在您的控制器什麼已經完成。

希望這可以幫助

來源

2016-09-14 18:36:32 KpTheConstructor

服務中沒有'$ scope' – charlietfl

我可以使用$ rootscope來做到嗎？ –

是的，只需調用$ rootScope.appy（）; – KpTheConstructor

AngluarJS和Firebase，使用服務更新表格

回答

相關問題