Firebase 数组获取未在页面加载时加载 [英] Firebase Array Fetches Not Loading on Page Load

问题描述

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

出于某种原因，我的页面在我的 JS 中的数组加载之前加载，呈现一个空页面.我试过将所有内容包装在 init() 函数中并加载它，但仍然是同样的问题.谁能帮我弄清楚如何预先预加载我的 JS 数组，或者有其他解决方案吗?

For some reason my page loads before the arrays in my JS load, rendering an empty page. I've tried wrapping everything in an init() function and loading that, but still the same issue. Can anyone help me figure out how to pre-load my JS arrays beforehand or is there another solution?

谢谢.

推荐答案

某些原因我的页面在数组之前加载

作为参数提供给 Firebase 方法的函数由 Firebase API 保留，直到数据从服务器到达.这些函数异步执行.这意味着它们在封闭函数完成之后执行.

The functions provided as arguments to the Firebase methods are held by the Firebase API until data arrives from the server. Those functions are executed asynchronously. This means they are executed after the enclosing functions complete.

在 AngularJS 框架及其摘要循环之外异步发生的范围更改不会触发对 DOM 的更改.将事件带入 AngularJS 框架的一种技术是将 ES6 承诺转换为 $q 服务承诺:

Changes to scope that occur asynchronously outside the AngularJS framework and its digest cycle will not trigger changes to the DOM. One technique to bring events into the AngularJS framework is to convert the ES6 promises to $q service promises:

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

使用与 AngularJS 框架及其摘要循环正确集成的 $q 服务承诺.

Use $q Service promises that are properly integrated with the AngularJS framework and its digest cycle.

将可能是值或(第 3 方)然后可承诺的对象包装到 $q 承诺中.当您处理可能是也可能不是承诺的对象，或者承诺来自不可信的来源时，这很有用.

$q.when

Wraps an object that might be a value or a (3rd party) then-able promise into a $q promise. This is useful when you are dealing with an object that might or might not be a promise, or if the promise comes from a source that can't be trusted.

--AngularJS $q 服务 API 参考 - $q.when

这篇关于Firebase 数组获取未在页面加载时加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！