我在将数据从Firebase加载到我的AngularJS工厂和控制器时遇到困难。
基本上我有以下工厂:
.factory('usersList', ['fbutil', function(fbutil) {
return {
all: function() {
return fbutil.syncArray('users');
},
get: function(userId) {
fbutil.syncArray('users').then( function(result) {
window.alert(result.length) // FIRST ALERT
var x = 0;
for (var i = 0, len = result.length; i < len; i++) {
if (result[i].uid == userId) {
window.alert("fount id") // SECOND ALERT
x = i;
} else {
window.alert("nope"); // THIRD ALERT
}
}
return result[x];
}) // then
} // get
} // return
}]); // usersList
我的控制器看起来像:
.controller('OverviewCtrl', ['$scope', 'fbutil', 'usersList', function($scope, fbutil, usersList) {
$scope.usersList = usersList.all();
$scope.testUser = usersList.get("simplelogin:29");
// OTHER CODE
};
}])
在我的 HTML 文件中,当我调用{{usersList}}
时,它会产生结果:
[{"color":"#CC0066","email":"a@a.com","name":"Eva","uid":"simplelogin:27"},{"color":"#009933","email":"b@b.com","name":"Semko","uid":"simplelogin:28"},{"color":"#CC0066","email":"c@c.com","name":"Caroline","uid":"simplelogin:29"}]
但是testUser不会加载,只是在索引文件中显示{{tesUser}}
。
有谁知道如何正确处理这个问题?如果不使用 then(在这个例子中也不起作用),我从第一个警报中发现result.length
等于 0,这给了我正在处理异步加载的建议。这就是为什么我试图.then()
处理它,但显然它不起作用。
在angularjs中处理承诺的最佳方式是使用延迟值,因为它允许您在返回数据之前处理它,同时保持所有内容不阻塞。有了$http我会像这样处理:
function get(id) {
var deferred = $q.defer();
var url = "anUrlwithid";
$http.get(url).success(function(data, status) {
logger.logDebug('Successful GET call to ' + url + 'n, results ' + status + ': ' + data);
deferred.resolve(function(data){
//do something to your data then return
});
}).error(function(data, status) {
logger.logDebug('Failed GET call to ' + url + 'n, results ' + status + ': ' + data);
deferred.reject(data);
});
return deferred.promise;
}
并在控制器中处理它:
get(1).then(function(data){//update scope or do something with the data processed});
你应该能够将它与你的fbutil一起使用,因为我认为它会返回一个承诺。希望对你有帮助
有关Q模块的更多详细信息,请点击此处:https://docs.angularjs.org/api/ng/service/$q
PS:记录器是我的个人服务之一,只需使用控制台.log