我正在尝试使用服务从 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/