从AngularFire中检索数据

时间:2015-12-11 09:43:49

标签: javascript angularjs firebase angularfire

我正在尝试使用服务从Angularfire检索数据,然后将返回值设置为我的控制器中的范围。

当我运行下面的代码时,我对scope.sessions进行了未定义。

SERVICE:

app.factory('sessions', function(){

var refToSessions = new Firebase('myFireBaseURL');
var allSessions = [];

return {
getSessions: function () {
  refToSessions.on("value", function (sessions) {
    allSessions.push(sessions.val());
    return allSessions;
  });
}

}; });

控制器:

app.controller('SessionsCtrl', ['$scope', '$state', 'Auth', 'sessions', function($scope, $state, Auth, sessions){
  $scope.sessions = sessions.getSessions();

$scope.submitSession = function() {
console.log($scope.sessions);
}
});

1 个答案:

答案 0 :(得分:1)

您正在尝试返回异步数据。

在从Firebase下载数据之前,您正在将href="//my.dns.com/rest"登录到控制台。

使用AngularFire中的allSessions

$firebaseArray

然后将app.constant('FirebaseUrl', '<my-firebase-url>'); app.service('rootRef', ['FirebaseUrl', Firebase); app.factory('Sessions', function(rootRef, $firebaseArray){ var refToSessions = ref.child('sessions'); return $firebaseArray('sessions'); } 注入您的控制器:

Sessions

数据一旦注入控制器就会开始下载。下载后,app.controller('SessionsCtrl', function($scope, $state, Auth, Sessions){ $scope.sessions = Sessions; // starts downloading the data console.log($scope.sessions); // still empty $scope.submitSession = function() { // likely by the time you click here it will be downloaded console.log($scope.sessions); $scope.sessions.$add({ title: 'new session' }); }; }); 知道触发$firebaseArray,因此它会显示在页面上。

由于您使用的是$digest,因此在将数据注入控制器之前,可以使用ui-router确保数据存在:

resolve

现在您将控制器代码更改为:

app.config(function ($stateProvider) {
  $stateProvider
    .state("session", {
      controller: "SessionsCtrl",
      templateUrl: "views/sessions.html",
      resolve: {
        sessions: function(Sessions) {
          // return a promise that will fulfill the data
          return Sessions.$loaded(); 
        }
      }
    })
});