Angularjs Firebase数组在页面加载时未加载
出于某种原因,我的页面在加载JS中的数组之前加载,呈现一个空页面。我尝试过将所有内容包装在init()函数中并加载它,但仍然存在相同的问题。有人能帮我弄清楚如何预先预加载JS阵列吗?或者有其他解决方案吗 谢谢。为什么我的页面在数组之前加载 Firebase API保留作为Firebase方法参数提供的函数,直到数据从服务器到达。这些函数是异步执行的。这意味着它们是在封闭函数完成后执行的 在AngularJS框架及其摘要周期之外异步发生的范围更改不会触发对DOM的更改。将事件引入AngularJS框架的一种技术是将ES6承诺转换为$q服务承诺:Angularjs Firebase数组在页面加载时未加载,angularjs,firebase,angular-promise,Angularjs,Firebase,Angular Promise,出于某种原因,我的页面在加载JS中的数组之前加载,呈现一个空页面。我尝试过将所有内容包装在init()函数中并加载它,但仍然存在相同的问题。有人能帮我弄清楚如何预先预加载JS阵列吗?或者有其他解决方案吗 谢谢。为什么我的页面在数组之前加载 Firebase API保留作为Firebase方法参数提供的函数,直到数据从服务器到达。这些函数是异步执行的。这意味着它们是在封闭函数完成后执行的 在AngularJS框架及其摘要周期之外异步发生的范围更改不会触发对DOM的更改。将事件引入AngularJS
// Movements Controller
app.controller("MovementsCtrl", ["$scope", "$rootScope", "$filter", "$timeout", "$route", function($scope, $rootScope, $filter, $timeout, $route) {
$rootScope.pageName = "Movements";
var date = new Date();
var currentDate = $filter('date')(new Date(), 'MM/dd/yyyy');
$scope.labels = [];
$scope.data = [];
$scope.recordsArray = []; // Converts records object into an array.
console.log($scope.recordsArray);
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
$rootScope.userID = user.uid;
// Run query to pull user records.
$timeout(function() {
var userID = $rootScope.userID;
var query = firebase.database().ref('/users/' + userID +'/movements/').orderByChild('created');
query.on("value", function(snapshot) {
$scope.records = snapshot.val();
angular.forEach($scope.records, function(element) {
$scope.recordsArray.push(element);
$scope.labels.push(element.name);
$scope.data.push(element.weight);
});
});
});
} else {
console.log("not signed in");
}
});
$scope.addRecord = function() {
console.log("Pushed");
var recordID = database.ref().push().key;
var userID = $rootScope.userID;
database.ref('users/' + userID + '/movements/' + recordID).set({
user: userID,
name: "Front Squat",
sets: 5,
reps: 5,
weight: 350,
created: currentDate
});
$route.reload();
}
}]);
使用与AngularJS框架及其摘要周期正确集成的$q服务承诺
$q.when
将可能是值或(第三方)的对象包装为$q
承诺。当您处理的对象可能是承诺,也可能不是承诺,或者承诺来自不可信任的来源时,这非常有用
您的阵列由异步请求填充;您可以做的一件事是在模板上放置ng if,并且仅在一个或所有数组中有数据时加载。此外,由于您使用的是ng route,您可以在路由定义中添加解析,这样页面将仅在解析承诺后呈现。您如何确保JS正在加载并且API调用正在运行properly@ModarNa因为如果我从一页转到另一页,所有内容都会正确加载。但是如果我在这个页面上刷新,没有任何东西加载。任何控制台errors@ModarNa没有错误
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
$rootScope.userID = user.uid;
// Run query to pull user records.
//$timeout(function() {
var userID = $rootScope.userID;
var query = firebase.database().ref('/users/' + userID +'/movements/').orderByChild('created');
//USE $q.when
$q.when(query.once("value")).then(function(value) {
$scope.records = value;
angular.forEach($scope.records, function(element) {
$scope.recordsArray.push(element);
$scope.labels.push(element.name);
$scope.data.push(element.weight);
});
});
//});
} else {
console.log("not signed in");
}
});