使用异步AngularJS过滤器

Question

我想使用过滤器从服务器获取信息。（-> {{值| asyncFilter}}）不幸的是，在解决诺言之后，我不能简单地传递函数。

我认为我离解决方案不远，但是我看不到它。

这里是代码：

app.filter('asyncFilter', function(DataFromServer){

  var getData = function(value) {
    return '-'; // PLACEHOLDER UNTIL ASYNC DATA IS LOADED
  };

  DataFromServer.getData()
    .then(function(data){
      getData = function(value){
       return data.value * value;
      };
    });

  return function(value) {
    return getData(value);
  }
})

首次初始化时，过滤器返回'-'，但是在解析了服务器中的数据后，它不会更改该值。

当切换该视图并返回时，该值将更改为'正确'的值

[请指出缺少的信息以解决此问题

我已经尝试在此页面上找到解决方案

感谢您的帮助

Answer 1

过滤器仅在其输入已更改时才执行。这比在每个$digest周期上执行过滤器更有效。

在每个$stateful上执行标记为$digest的过滤器。

app.filter('asyncFilter', function(DataFromServer){

  var getData = function(value) {
    return '-'; // PLACEHOLDER UNTIL ASYNC DATA IS LOADED
  };

  DataFromServer.getData()
    .then(function(data){
      getData = function(value){
       return data.value * value;
      };
    });

  function filterFn(value) {
    console.log("asyncFilter", value, getData.toString());
    return getData(value);
  }
  filterFn.$stateful = true;

  return filterFn; 
})

来自文档：

状态过滤器

强烈建议不要编写有状态的过滤器，因为AngularJS无法优化它们的执行，这通常会导致性能问题。只需将隐藏状态公开为模型并将其转换为过滤器的参数即可将许多有状态过滤器转换为无状态过滤器。

但是，如果您确实需要编写有状态过滤器，则必须将过滤器标记为$stateful，这意味着它将在每个$digest周期内执行一次或多次。

有关更多信息，请参阅

• AngularJS Developer Guide - Stateful filters