AngularFire V1.2 $firebaseArray() $loaded() 只调用一次 [英] AngularFire V1.2 $firebaseArray() $loaded() only called once

问题描述

我在数组上使用 AngularFire 和 promise($loaded() on firebaseArray()).

I am using AngularFire and promises on arrays ($loaded() on firebaseArray()).

目前，我使用以下代码:

Currently, I'm using the following code:

问题:我转到第 1 页，数据已加载且一切正常.转到第 2 页并返回到第 1 页.现在 $loaded() 在我刷新整个页面之前不起作用.我该如何解决这个问题?

Problem: I go to page1, the data is loaded and all fine. Go to page 2 and come back to page1. Now the $loaded() doesn't work until I do a full page refresh. How do I fix this problem?

app.factory('Items', ['FBURL', '$firebaseArray', function(FBURL, $firebaseArray) {
    return {
      ofCategory: function(catId){
        var ref = new Firebase(FBURL);
        var refSearch = new Firebase.util.NormalizedCollection(...).select(...).ref(); 
        var allItems= refSearch.orderByChild(...);
        return $firebaseArray(allItems);
      }
    }; 
}]);

第 1 页:

function readData() { 
  if($scope.Items) { 
     $scope.Items.$destroy();
     $scope.Items= null;
  }   
  $scope.Items = Items.ofCategory($routeParams.id);
  $scope.Items.$loaded().then(function(itm) {
        ...
  });
}

第 2 页:

$scope.Items= Items.ofCategory($routeParams.id);

Firebase 文档¹ 说:$loaded() 返回一个承诺，该承诺在从我们的数据库下载初始记录后解析.这只是调用一次，应该小心使用"，这可能是我在这里得到的.

The Firebase documentation¹ says: "$loaded() returns a promise which resolves after the initial records have been downloaded from our database. This is only called once and should be used with care", and that is probably what I get here.

我的尝试:如图所示，在 Page1 上的 readData() 函数中，我销毁了 $scope.Items 变量在任何新负载之前.但它似乎没有做任何事情.AFAIU，$loaded() 正在处理 firebaseArray()，因此销毁 $scope 数组可能没有多大帮助.那么，在不需要完全刷新页面的情况下，我还应该做些什么来完成这项工作?

What I've tried: As shown, in my readData() function on Page1, I destroy the $scope.Items variable before any new load. But it doesn't seem to be doing anything. AFAIU, $loaded() is working on firebaseArray(), so destroying the $scope array might not help much. So, what else should I do to make this work without needing to fully refresh the page?

推荐答案

我听说应该避免使用 AngularFire，这看起来是一个很好的理由.

I have heard that AngularFire should be avoided and this looks like a good reason.

直接使用 firebase API:

Use the firebase API directly:

app.factory('FbItems', ['FBURL', '$q', function(FBURL, $q) {
    return {
      ofCategory: function(catId){
        var ref = new Firebase(FBURL);
        var refSearch = new Firebase.util.NormalizedCollection(...).select(...).ref(); 
        var allItems= refSearch.orderByChild(...);
        var promise = allItems.once('value').then(function(snapshot) {
            return snapshot.val();
        });
        return $q.when(promise);
      }
    }; 
}]);

使用 $q.when.只有在 AngularJS 执行上下文中应用的操作才会受益于 AngularJS 数据绑定、异常处理、属性监视等.

It is important to convert the ES6 promise to an AngularJS $q promise with $q.when. Only operations which are applied in the AngularJS execution context will benefit from AngularJS data-binding, exception handling, property watching, etc.

用法:

function readData() { 
  promise = FbItems.ofCategory($routeParams.id);
  promise.then(function(items) {
      $scope.Items = items;
  }).catch(function(error) {
      console.log(error);
  });
}

这篇关于AngularFire V1.2 $firebaseArray() $loaded() 只调用一次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！