等待angularJS中firebase的響應

Question

我是firebase的新手，我正在使用新控制檯來簡單演示保存，從firebase實時數據庫中檢索數據。在檢索數據時，我將它連接到模型以列表格式顯示在屏幕上。但屏幕沒有顯示任何東西。我想用promise來等待，直到我從Firebase數據庫獲取數據。

app.factory('Authentication', ['$rootScope', function($rootScope) { 
return { 
    getUsers: function() { 
     firebase.database().ref('/userInfo').on('value', function (snapshot) { 
      return snapshot.val(); 
     }); 
    } 
    } 
} 

如何使用承諾要等到數據被取出。

app.controller('myController', function($scope, $rootScope, Authentication) { 
    $scope.userData = Authentication.getUsers(); 
} 

Answer 1

首先，你應該安裝q或下載和腳本

1）npm install q --save

2）添加添加到您的應用程序模塊，如添加'q'

3）加Q到您的工廠和使用deffer

app.factory('Authentication', ['$rootScope','q', function($rootScope, q) { 
return { 
    getUsers: function() { 
     var defer = q.defer(); 
     firebase.database().ref('/userInfo').on('value', function (snapshot) { //assuming you get snapshot value from the db 
      defer.resolve(snapshot.val()); 
      //return snapshot.val(); 
     }); 
    return defer.promise; 
    } 
    } 
} 

4）然後再加入到你的函數

app.controller('myController', function($scope, $rootScope, Authentication) { 
    Authentication.getUsers().then(function(snap){ 
     $scope.userData = snap; 
    }); 
} 

，你還可以添加延遲.reject返回犯錯，你抓住它的其他功能，在你的代碼

例如

app.factory('Authentication', ['$rootScope','q', function($rootScope, q) { 
return { 
    getUsers: function() { 
     var defer = q.defer(); 
     firebase.database().ref('/userInfo').on('value', function (snapshot) { 
      if(!snapshot.val()){ 
       defer.reject('err no data'); 
      }else{ 
       defer.resolve(snapshot.val()); 
       //return snapshot.val(); 
      } 
     }); 
    return defer.promise; 
    } 
    } 
} 

，在這裏你做

app.controller('myController', function($scope, $rootScope, Authentication) { 
    Authentication.getUsers().then(function(snap){ 
     $scope.userData = snap; 
    }, function(err){ 
     //do something with the error 
    }); 
} 

希望它幫助

note

如您所知，js是異步的。所以當我們需要等待迴應，並且需要時間時，js繼續做他的東西。所以我們需要承諾確保在他進入下一步（我們希望他走）之前得到響應

Javascript和AngularJS世界的承諾是保證我們將從在未來某個時候採取行動; 這就是決心和拒絕

更多信息請閱讀這篇文章

promise

希望hepled

Answer 2

Use AngularFire

你不是屏幕，因爲你看到任何東西試圖從異步函數中返回。

此外，Angular使用髒檢查系統來判斷值何時發生變化並重新渲染屏幕。 Firebase庫本身無法觸發此髒檢查系統。這就是爲什麼你應該使用官方支持的AngularFire庫。

// Initialize Firebase 
var config = { 
    apiKey: "<your-api-key>", 
    authDomain: "<your-auth-domain>", 
    databaseURL: "https://<your-database-url>.firebaseio.com", 
    storageBucket: "", 
}; 
firebase.initializeApp(config); 
angular.module('app', ['firebase']) 
    .constant('FirebaseUrl', config.databaseURL) 
    .controller('MyCtrl', MyController) 
    .config(function($firebaseRefProvider, FirebaseUrl) { 
    $firebaseRefProvider.registerUrl(FirebaseUrl); 
    }); 

function MyController($scope, $firebaseRef, $firebaseArray) { 
    var usersRef = $firebaseRef.child('userInfo'); 
    $scope.users = $firebaseArray(usersRef); 
}