延迟返回变量，直到从 Firebase 同步数据

Question

我在应用程序中使用 angularfire 和 firebase。我有许多文本文档存储在 firebase 中。我想获取所有这些文档并返回这些文档中所有段落的数组，以便使用 Angular 进行操作。

我创建了一个服务，它将来自 firebase 的数据与可变文档同步。该服务具有以下功能，可将其更改为段落数组。

getParas: function(){
    var paras = [];
    for(var i=0;i< documents.length;i++){
        paras = paras.concat(documents[i].text.split('\n'));
    }
    return paras;
}

但是，由于从 firebase 同步数据需要时间，因此函数会在对 paras 变量进行更改之前返回。

我尝试过使用documents.$loaded().then(function(){...，但不确定如何从getParas() 函数返回结果。

我见过article，但过滤器似乎不是最好的选择？

谢谢

马修

Answer 1

您有两个选择。

1. 在加载页面之前解析“documents”变量 路线。
2. 使用承诺，并确保“getParas”是 在数据设置为“文档”变量后调用。

以下是一个在控制器中完成所有承诺的解决方案，您可以从这个开始，然后尝试将其合并到您的服务中。

.controller("YourCtrl", ["$scope", "$q", function($scope, $q){
  var promise = getFB();
  promise.then(function(){
    afterPromise();
  })

  function getFB(){
    var documentRef = new Firebase("YOURFIREBASERURL/documents")
    var fireDataDef = $q.defer()

    documentRef.once("value", function(snapshot){
      $scope.documents = snapshot.val();
      fireDataDef.resolve();
    })
    return fireDataDef.promise;
  }
function afterPromise(){
    var $scope.paras = [];
    for(var i=0;i< $scope.documents.length;i++){
        $scope.paras = $scope.paras.concat(documents[i].text.split('\n'));
    }
  }
}]

Answer 2

既然这不是问题，我将忽略这样一个事实，即您可能应该将段落存储在单独的路径中，这样您就可以准备好获取它们，而不是通过这个无关的步骤每次读取时解析它们。但我要指出，以读取方式存储数据是朝着正确方向迈出的一大步。

由于多种原因，这里使用 $loaded 是不正确的。首先，您获取了动态的实时数据，并将其转换为静态资产，在源数据更改时不会更新。如果是这种情况，不妨将其存储在 Web 服务器上的文件中并使用 HTTP 获取它。其次，使用 $loaded() 通常意味着您正在为自己创建额外的工作并尝试对 AngularFire 已经做得很好的事情进行微观管理，例如管理异步下载和操作同步数组中的数据。

很可能，您只想使用$extendFactory 在数组原型上创建一个附加方法。

// create a factory that has a getParas method
app.factory('ListFactory', function($FirebaseArray) {
    return $FirebaseArray.$extendFactory({
        getParas: function() {
            var paras = [];
            for(var i=0; i < this.$list.length; i++){
                paras = paras.concat(this.$list[i].text.split('\n'));
            }
            return paras;
        }
    });
});

// create the synchronized list
app.factory('List', function(ListFactory, $firebase) {
    return function(ref) {
        return $firebase(ref, {arrayFactory: ListFactory}).$asArray();
    }
});

app.controller('ctrl', function(List, $window, $scope) {
     var ref = new $window.Firebase(URL);
     $scope.list = List(ref);
});

那么在你看来，只需引用新方法即可：

<pre>
{{list.getParas()|json}}
</pre>