等待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); 
}