使用 Firebase 和 AngularFire 对 Angular 中的数据进行异步请求时遇到问题答案

【问题标题】：Trouble with Async requests for data in Angular with Firebase & AngularFire使用 Firebase 和 AngularFire 对 Angular 中的数据进行异步请求时遇到问题
【发布时间】：2014-04-04 15:09:53
【问题描述】：

我有一个关于使用 Angular 和 Firebase 进行异步加载的问题。我有一个用户模型和一个语言模型；一个用户可以有多种语言，这意味着 User 模型有一个名为“languages”的属性，它是一个数组。

我可以通过以下方式获取当前用户：

$scope.user = User.findByUsername($routeParams.username)

一旦加载了用户，我就可以采取一些行动。我想采取的行动是找到根据用户的语言 ID 从数据库中获取语言对象。也就是说，我不想说“John User 说 IDXXXXXXX”，而是说“John User 说英语”。

$scope.user.$on('loaded', function(){
  angular.forEach($scope.user.languages, function(id){
    $scope.userLanguages[id] = Language.find(id);
  });
});

这有时有效，但并非总是如此。很明显，问题出在我通过 ID 查找语言的方式上——有时它超级快而且 $scope.userLanguages[id] 意味着什么，有时它不够快而且 id 是“未定义的”。这几乎就像我需要为 Language.find() 添加另一个 $on('loaded') 侦听器。但后来我进入了一组复杂的嵌套监听器，这看起来很疯狂。

我在这里错过了什么？

// The basic structure of data in my Firebase database
languages
  -IDXXXXXXXX
      name: 'English',
      localName: 'English'
  -IDXXXXXXXX
      name: 'Spanish',
      localName: 'Espanol' 
users
  -SomeName
      username: 'Whatever',
      languages: [IDXXXX, IDXXXY, etc]

在提出我的问题时，我想到以下可能可行。确实如此，但是将一个 $ 放在另一个 $ 上感觉很奇怪。这是否表明我应该寻找一种更好的方式来构建我的数据和代码？或者也可以……

$scope.user.$on('loaded', function(){
    angular.forEach($scope.user.languages, function(id){
      var lang = Language.find(id);
      lang.$on('loaded', function(){
        $scope.userLanguages[id] = Language.find(id);
        $scope.languages[id].selected = true;
      });
    });
  });

【问题讨论】：

我只是稍微改变了我的问题以显示可能的解决方案（在底部）
您应该考虑在上面的代码中包含 Language.find，因为这是行为的关键。

标签： angularjs firebase angularfire

【解决方案1】：

由于loaded 事件保证只会被调用一次，因此可以嵌套它们。但是，假设 Language.find 返回一个 $firebase 实例，这可能没有必要；您可以立即分配它；当数据到达时它仍然会更新。

$scope.user.then(function() { // as of 0.7.2, this is equivalent to $on('loaded')
  angular.forEach($scope.user.languages, function(id) {
     $scope.userLanguages[id] = Language.find(id);
  });
});

要记住的一点是，您的“加载”事件只会触发一次，因此如果将来用户的语言索引发生变化，$scope.userLanguages 和 $scope.languages 都不会更新，因为这不受监控实时。

如果您想添加实时监控，您可以执行以下操作，而不是使用loaded 事件：

$scope.user.$child('languages').$on('child_added', function(snap) {
   var id = snap.snapshot.name;
   $scope.userLanguages[id] = Language.find(id);
});

【讨论】：