javascript - 如何访问 $FirebaseArray 中的各个元素而不等待 $loaded？

Question

我使用 AngularFire 从 Firebase 请求一些数据像下面这样。

$rootScope.userTags = $firebase($fbCurrent.child('tags')).$asArray();

通过以下方式记录这些数据，我得到的输出如下图所示。所以，

console.log($rootScope.userTags);
console.log($rootScope.userTags[0]);
$rootScope.userTags.$loaded().then(function () {
  console.log($rootScope.userTags[0]);
});

在第一个日志语句中，您可以注意到一个包含五个元素的 $FirebaseArray 对象。在第二条日志语句中，当我尝试访问其中一个元素时，尽管您可以清楚地看到 un$loaded 数组中的这些元素，但我得到了 undefined 。现在，在最后一个日志语句中，调用 $loaded 让我可以毫无问题地访问这些元素。

为什么会这样？有没有办法可以访问这些元素，因为这些元素已经存在，而无需在数组上调用 $loaded ？

Answer 1

$asArray() 或 $asObject() 方法是异步操作。必须先从 Firebase 下载数据，然后才能访问。这只是异步数据的本质，而不是 Firebase 特有的任何内容。

我们处理这个异步问题的方法是通过 $loaded promise 。

看来这里真正的问题是确保在 Controller 实例化时加载数据。您可以通过解析路由器中的数据来解决此问题。

解决需要返回的 promise 。当用户路由到该页面时，Angular 将不会加载该页面，直到 promise 得到解决。从 Promise 解析的数据将注入(inject)到 Controller 中。

.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider

      .when('/resolve', {
        templateUrl: 'resolve.html',
        controller: 'ResolveCtrl',

        resolve: {
          // data will be injected into the ResolveCtrl
          data: function($firebase) {
           // resolve requires us to return a promise
           return $firebase(new Firebase('your-firebase')).$asArray().$loaded();
          }
        }

      })
  }
])

现在我们正在解析路由中的数据，我们可以在 Controller 中访问它。

.controller('ResolveCtrl', function($scope, data) {

  $scope.userTags = data;
  $scope.userTags[0]; // data has been resolved from the promise

});