正在从AngularFire检索数据

Question

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

当我运行下面的代码时，我会得到scope.sessions的未定义返回。

服务：

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

Answer 1

您正试图返回异步数据。

在从Firebase下载数据之前，您正在将allSessions记录到控制台。

使用AngularFire中的$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(); 
        }
      }
    })
});

现在您可以将控制器代码更改为：

app.controller('SessionsCtrl', function($scope, $state, Auth, sessions){
  $scope.sessions = sessions; // data is available since injected by router
  console.log($scope.sessions); // logs the appropriate data
  $scope.submitSession = function() { 
    $scope.sessions.$add({ title: 'new session' });
  };
});