javascript - 从 AngularFire 检索数据

标签 javascript angularjs firebase angularfire

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

当我运行下面的代码时,我得到了关于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;
  });
}

}; });

Controller :

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

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

最佳答案

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

在从 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注入(inject)到您的 Controller 中:

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

数据注入(inject) Controller 后即开始下载。下载后,$firebaseArray 知道触发 $digest,因此它会出现在页面上。

由于您使用的是ui-router,因此您可以使用resolve来确保数据存在,然后再将其注入(inject) Controller :

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

现在您可以将 Controller 代码更改为:

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

关于javascript - 从 AngularFire 检索数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34220383/

相关文章:

firebase - 在 flutter 中验证电子邮件时不会调用 onAuthStateChanged

javascript - 仅使用 HTML 或 Javascript 从 Android WebView 在默认浏览器中打开链接

javascript下拉重定向传递var问题

javascript - 迭代对象数组并将值相加

javascript - 在 angularjs/javascript 中操作数组

javascript - 在 AngularJs 中将字符串解析为 HTML

javascript - 当放置在 Rails 的 HEAD 中时,jQuery 就绪事件不会在每个页面加载时触发

javascript - 代码第一次没有正确执行。下次它会

android - Firebase 中的值(value)交换问题

android - window.FirebasePlugin.verifyPhoneNumber is not a function 错误