当前位置: 首页 > 面试题库 >

AngularJS:异步初始化过滤器

欧阳安阳
2023-03-14
问题内容

我在尝试使用异步数据初始化过滤器时遇到麻烦。

过滤器非常简单,它需要将路径转换为名称,但是这样做需要一个对应数组,我需要从服务器中获取该数组。

在返回函数之前,我可以在过滤器定义中执行操作,但是异步方面阻止了该操作

angular.module('angularApp').
  filter('pathToName', function(Service){
    // Do some things here

    return function(input){
      return input+'!'
    }
  }

使用诺言可能是可行的,但我对角负载如何过滤没有明确的了解。这篇文章解释了如何通过服务实现这种魔力,但是是否有可能对过滤器做同样的事情?

而且,如果有人对如何翻译这些路径有更好的主意,我将不知所措。

编辑:

我尝试了Promise方式,但是有一些不对劲,而我却看不到:

angular.module('angularApp').filter('pathToName', function($q, Service){

  var deferred = $q.defer();
  var promise = deferred.promise;

  Service.getCorresp().then(function(success){
    deferred.resolve(success.data);
  }, function(error){
    deferred.reject();
  });

  return function(input){
    return promise.then(
      function(corresp){
        if(corresp.hasOwnProperty(input))
          return corresp[input];
        else
          return input;
      }
    )
  };
});

我不是很熟悉诺言,使用诺言是否正确?


问题答案:

这是一个例子:

app.filter("testf", function($timeout) {
    var data = null, // DATA RECEIVED ASYNCHRONOUSLY AND CACHED HERE
        serviceInvoked = false;

    function realFilter(value) { // REAL FILTER LOGIC
        return ...;
    }

    return function(value) { // FILTER WRAPPER TO COPE WITH ASYNCHRONICITY
        if( data === null ) {
            if( !serviceInvoked ) {
                serviceInvoked = true;
                // CALL THE SERVICE THAT FETCHES THE DATA HERE
                callService.then(function(result) {
                    data = result;
                });
            }
            return "-"; // PLACEHOLDER WHILE LOADING, COULD BE EMPTY
        }
        else return realFilter(value);
    }
});

这个小提琴是一个使用超时而不是服务的演示。

编辑:根据sgimeno的评论,必须格外小心,不要多次致电该服务。请查看serviceInvoked上面代码中的更改和小提琴。另请参阅Angular
1.2.1的分叉小提琴和一个用于更改值并触发摘要循环的按钮:分叉小提琴

编辑2:根据MihaEržen的评论,此解决方案对Angular1.3没有记录程序。该解决方案几乎是微不足道的,虽然,使用$stateful过滤器标志,记录在这里下的“状态过滤器”,以及必要的分叉小提琴。

请注意 ,此解决方案会损害性能,因为每个摘要循环都称为过滤器。根据具体情况,性能下降是否可以忽略不计。



 类似资料:
  • 我在尝试用异步数据初始化过滤器时遇到了麻烦。 过滤器非常简单,它需要将路径转换为名称,但要做到这一点,它需要一个对应数组,我需要从服务器获取该数组。 在返回函数之前,我可以在过滤器定义中做一些事情,但是异步方面阻止了这一点 使用promise可能是可行的,但我不清楚角度负载是如何过滤的。这篇文章解释了如何通过服务实现这样的魔力,但是对于过滤器也可以这样做吗? 如果有人对如何翻译这些路径有更好的想法

  • 我有一个AngularJS服务,我想用一些异步数据初始化它。类似这样的事情: 显然,这是行不通的,因为如果在返回之前,有东西试图调用,我将得到一个空指针异常。据我所知,从这里和这里所问的其他一些问题中,我有几个选择,但没有一个看起来很清楚(也许我遗漏了什么): 使用“运行”设置服务 设置应用程序时,请执行以下操作: 那么我的服务将如下所示: 这在某些时候起作用,但如果异步数据的时间恰好比初始化所有

  • 问题内容: 我有一个AngularJS服务,我想使用一些异步数据进行初始化。像这样: 显然,这是行不通的,因为如果在返回之前尝试进行调用,我将得到一个空指针异常。据我从阅读这里和这里提出的其他一些问题中所知道的,我有一些选择,但是它们似乎都不是很干净(也许我错过了一些东西): 安装服务“运行” 设置我的应用程序时,请执行以下操作: 然后我的服务将如下所示: 这有时会起作用,但是如果异步数据恰好比初

  • SOFABoot 提供了模块并行启动以及 Spring Bean 异步初始化能力,用于加快应用启动速度。本文介绍如何使用 SOFABoot 异步初始化 Spring Bean 能力以提高应用启动速度。 使用场景 在实际使用 Spring/Spring Boot 开发中,一些 Bean 在初始化过程中执行准备操作,如拉取远程配置、初始化数据源等等。在应用启动期间,这些 Bean 会增加 Spring

  • 问题内容: 我想以异步方式初始化模块,并提出一些想法。我需要具有Mongo集合列表和其他数据的DB对象,但是为了简洁起见,其中的文件列表确实有用。 我无法导出函数或类,因为我每次都需要返回相同的对象。 首先 想到的最简单的方法是分配给它,然后填充它: 不好的事情–我真的从外面不知道什么时候准备好列表,也没有检查错误的好方法。 *我想出的 *第二种 方法是继承并通知所有人数据库已准备就绪或发生了错误

  • 问题内容: 我同时使用AngularJS和Foundation。 要初始化Foundation JS,您必须进行以下调用: 在AngularJS应用程序中进行此调用的最佳方法是什么?代码示例将不胜感激。 另外,如果我要围绕Foundation JS组件编写指令,那么如何确保Foundation已初始化? 问题答案: 您可以编写代码以将其引入Angular框架。这是一个使用with 的示例,也可以使