AngularJS:异步初始化过滤器

2023-11-23

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

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

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

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

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

使用承诺可能是可行的,但我对角度负载如何过滤没有任何清晰的了解。 这post解释了如何通过服务实现如此神奇的效果,但是是否可以对过滤器做同样的事情呢?

如果有人对如何翻译这些路径有更好的想法,我会洗耳恭听。

EDIT:

我尝试使用承诺方法,但有些不对劲,而且我看不出是什么:

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);
    }
});

This fiddle是使用超时而不是服务的演示。


编辑:根据 sgimeno 的评论,必须格外小心,不要多次调用该服务。请参阅serviceInvoked上面的代码和小提琴的变化。另请参阅 Angular 1.2.1 的 fork fiddle 和用于更改值并触发摘要周期的按钮:叉形小提琴


编辑 2:根据 Miha Eržen 的评论,此解决方案不再适用于 Angular 1.3。不过,解决方案几乎是微不足道的,使用$stateful过滤标志,已记录here在“状态过滤器”下,以及必要的叉形小提琴.

Do note该解决方案会损害性能,因为每个摘要循环都会调用过滤器。性能下降可能可以忽略不计,也可以忽略不计,具体取决于具体情况。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

AngularJS:异步初始化过滤器 的相关文章

  • 如何从 jQuery 对话框按钮访问我的角度范围?

    http plnkr co edit Rf0VItthVBg6j0z7KudO http plnkr co edit Rf0VItthVBg6j0z7KudO 我正在使用 jQuery 对话框 并且想要使用对话框按钮 但我不知道如何获取范围
  • HTML/VBA Click 事件未触发

    这是我第一次在 StackOverflow 上发布问题 到目前为止 我已经能够通过 VBA 帮助论坛解决我的大部分问题 我的问题很简单 我有一个自动数据拉取 我需要在其中导出数据 我过去曾在这方面取得过成功 但这次略有不同 我尝试单击以生成
  • 网站 YouTube 嵌入视频不断播放

    我正在使用 youtube 提供的 iframe 在我的网站上嵌入视频 我还使用了一个 css 弹出窗口 这是我从这个页面学到的http www pat burt com web development how to do a css po
  • Jquery从下拉列表中获取所选值的id

    我有一个下拉列表 可以从数据库获取值 如下所示 get getJobs function jobs seljobs jobs var i 0 jobs forEach function n alert job id n id 32 67 4
  • 如何按照编写的顺序迭代 javascript 对象属性

    我发现了代码中的一个错误 我希望通过最少的重构工作来解决该错误 此错误发生在 Chrome 和 Opera 浏览器中 问题 var obj 23 AA 12 BB iterating through obj s properties for
  • 如何使用canvas.toDataURL()将画布保存为图像?

    我目前正在构建一个 HTML5 Web 应用程序 Phonegap 本机应用程序 我似乎不知道如何将画布保存为图像canvas toDataURL 有人可以帮我吗 这是代码 有什么问题吗 我的画布被命名为 canvasSignature J
  • 如何使用 jest 模拟第三方库

    我正在开发一个node js应用程序使用nestjs我有一堂课叫LoggerService如下 export class LoggerService private logger Rollbar constructor this logge
  • Ember.js 处理 View 事件后转换到路由

    Setup 我有一个 Ember 应用程序 支持使用 Imgur API 上传图像 我已经有一个工作路线和模板来处理任何 Imgur ID 但我想在上传新图像后转换到此路线 使用返回的 Imgur ID 这是该应用程序的相关部分 http
  • 使用 CryptoJS 更改密钥 [重复]

    这个问题在这里已经有答案了 我正在使用 CryptoJS 来加密和解密文本 在这里 我只是获取消息并显示加密和解密消息 我使用DES算法进行加密和解密 这是我的 HTML 文件
  • 检查 touchend 是否在拖动后出现

    我有一些代码可以更改表的类 在手机上 有时表格对于屏幕来说太宽 用户将拖动 滚动来查看内容 但是 当他们触摸并拖动表格时 每次拖动都会触发 touchend 如何测试触摸端是否是触摸拖动的结果 我尝试跟踪dragstart和dragend
  • Node.js - console.log 不显示数组中的项目,而是显示 [Object]

    我在注销对象内数组的内容时遇到问题 实际的物体看起来像这样 var stuff accepted item1 item2 rejected response Foo envelope from The sender to new item1
  • 在为 RXJS 可观察量编写测试时,如何避免让调度程序通过我的业务逻辑?

    我发现使某些测试通过的唯一方法是显式地将调度程序传递给函数 为了便于说明 请考虑以下函数 function doStuff stream return stream delay 100 filter x gt x 2 0 map x gt
  • 使用 JS 合并具有相同值的相邻 HTML 表格单元格

    我已经为此苦苦挣扎了一段时间 我有一个根据一些 JSON 数据自动生成的表 该数据可能会有所不同 我想合并第一列中具有相同值的相邻单元格 例如此表中的 鱼 和 鸟 table tr td fish td td salmon td tr tr
  • 将数组排序为第一个最小值、第一个最大值、第二个最小值、第二个最大值等

    编写一个JS程序 返回一个数组 其中第一个元素是第一个最小值 第二个元素是第一个最大值 依此类推 该程序包含一个函数 该函数接受一个参数 一个数组 该函数根据要求返回数组 输入示例 array 2 4 7 1 3 8 9 预期输出 1 9
  • 单击关闭按钮后不显示 Google 一键登录 UI

    我正在尝试按照本指南使新的谷歌一键登录工作 https developers google com identity one tap web https developers google com identity one tap web
  • 单击引导分页链接时调用 jquery 函数

    我想在单击引导分页链接时调用 jquery 函数 假设我想从第1页遍历到第2页 应该调用一个jquery函数 我正在使用以下代码 但它不起作用 ul pagination on click li function alert page ch
  • 在 Javascript 中减少/分组数组

    基于this https stackoverflow com a 40774906 3254598例如 我想以稍微不同的方式按对象进行分组 结果应该如下 key audi items make audi model r8 year 2012
  • 如何在 gulp.src 中使用基本正则表达式?

    我正在尝试选择两个文件gulp src highcharts js and highcharts src js 当然 我知道我可以使用数组表达式显式添加这两个表达式 但出于学习目的 我尝试为它们编写一个表达式 我读过可以使用简单的正则表达式
  • 单击列表时使用 bootstrap Dropdown 防止下拉菜单消失

    我正在使用使用引导下拉菜单 http twitter github com bootstrap javascript html dropdowns生成下拉菜单 我想防止点击菜单时菜单消失 我已经实现了以下代码 但它不起作用 知道如何修复它吗
  • Googletest:如何异步运行测试?

    考虑到一个包含数千个测试的大型项目 其中一些测试需要几分钟才能完成 如果按顺序执行 整套测试需要一个多小时才能完成 通过并行执行测试可以减少测试时间 据我所知 没有办法直接从 googletest mock 做到这一点 就像 async选项

随机推荐

  • 如何使用javascript检查页面是否是第一次加载

    我想检查页面是否是第一次加载 如果是 则显示过滤器 如果我将 showFiltermenu 放在 pageLoad 函数中 那么每次加载页面时它都会显示 但我只想它第一次显示 我尝试使用Page IsPostBack但不显示过滤器
  • 在 Ruby 中抓取/解析 Google 搜索结果

    假设我有 Google 搜索结果页面的完整 HTML 有谁知道任何现有的代码 Ruby 来抓取 解析Google搜索结果的第一页 理想情况下 它可以处理可能出现在任何地方的购物结果和视频结果部分 如果没有 那么基于 Ruby 的最佳屏幕抓取
  • Visual Studio Code 抱怨它“找不到 *.d.ts 文件中定义的类型的命名空间”

    我使用创建了一个新项目吞咽角Yeoman 生成器 语言设置为 TypeScript 然后运行Gulp构建过程并在网络浏览器中打开页面 所有这些都正常运行 没有任何更大的问题 我只需要更换ref master in the tsd json
  • Android:同时进行平移和旋转动画

    我想以编程方式同时显示两个动画 而不是在 XML 文件中 它应该旋转和平移我怎样才能做到这一点 请给我一些建议 这是妈妈的代码 gt ImageView snowImg1 ImageView findViewById R id snowim
  • 如何在 QPlainTextEdit 中为突出显示的字符串创建工具提示

    我有一个 QPlainTextEdit 并且其中突出显示了一些单词 现在我希望当我用鼠标悬停在它上面时 它会向我显示一个工具提示 其中包含有关此突出显示单词的描述或类似内容 在 QT IDE 中类似这样 但我不知道如何开始这个所以任何想法
  • 可变长度与 Malloc 数组

    根据c99标准 我们可以编写以下代码 这是完全合法的 int x scanf d x int ar x 我的问题是 如果我可以分配这样的数组 为什么我需要 malloc 再次分配可变大小的数组 另外 您能否解释一下可变长度数组分配是如何发生
  • 如何将具有历史记录的 SVN 存储库迁移到新的 Git 存储库?

    我阅读了 Git 手册 常见问题解答 Git SVN 速成课程等 它们都解释了这个那个 但你找不到像这样的简单说明 SVN 存储库位于 svn myserver path to svn repos Git 存储库位于 git myserve
  • 类定义之外不允许覆盖

    我创建了一个抽象类和一个具体子类 bca h include
  • 在 ASP.NET MVC 4 中获取复选框值

    我正在开发 ASP NET MVC 4 应用程序 这个应用程序有一个基本的形式 我的表单的模型如下所示 public class MyModel public string Name get set public bool Remember
  • 模板的编译是如何工作的?

    我正在读一本关于模板如何工作的书 但我很难理解模板的解释 It says 当编译器看到模板的定义时 它不会生成代码 仅当我们实例化模板的特定实例时 它才会生成代码 事实上 只有当我们使用模板时 而不是在定义模板时 才会生成代码 这一事实会影
  • 如何使用 ADO.NET 获取表中列的 SqlDbType?

    我试图在运行时确定 sql server 表列的 SqlDbType 是什么 是否有一个类可以在 System Data SqlClient 中执行此操作 或者我应该自己进行映射 我可以从那里得到一个字符串表示 SELECT DATA TY
  • 像 360 全景一样自动捕捉图像

    我正在开发类似于全景应用程序的应用程序 我想当设备从左向右移动时自动捕获图像 就像 360 全景应用程序一样 经过一些研究 我发现Sensor线程对此很有用 我已经看到了一些传感器的例子here但我无法理解如何使用传感器来达到我的目的 我也
  • 错误 ITMS-9000:“签名缺失或无效。

    错误 ITMS 9000 签名丢失或无效 捆绑包路径 Payload My app name app GooglePlus bundle 处的捆绑包 com google GPPSignIn3PResources 未使用 Apple 提交证
  • 将 Grails 应用程序转换为插件

    我通过 grails create app 启动了一个 grails 应用程序 为了模块化 我觉得组件最好是一个插件 我可以将此应用程序转换为 grails 插件吗 谢谢 巴布 我从未根据之前编写的应用程序创建过插件 但查看了Grails
  • 为什么浮动 div 和非浮动 div 的顺序仅在某些情况下才重要?

    我有类似的问题CSS 自动边距压低其他元素 右侧浮动侧边栏被推到主非浮动内容 div 下方 这answer建议的工作 只需颠倒标记的顺序并写出浮动 divbefore非浮动 div 例如 这个 div class container div
  • 如何向数组添加新元素?

    我有以下代码 String where where append ContactsContract Contacts HAS PHONE NUMBER 1 where append ContactsContract Contacts IN
  • 在张量流中多次运行 train op

    我有一些相当大的批量大小 我想对其采取多个梯度步骤 虽然我可以使用 python for 循环轻松完成此操作 但我想可能有一种更有效的方法 不需要在每次迭代时将数据传输到 GPU 我曾多次尝试将火车操作放入获取列表中 但我不确定它实际上是否
  • 在 Pandas 数据框中创建 value_counts 列

    我想从 Pandas 数据帧列之一创建唯一值的计数 然后将包含这些计数的新列添加到我的原始数据帧中 我尝试了几种不同的方法 我创建了一个 pandas 系列 然后使用 value counts 方法计算计数 我尝试将这些值合并回原始数据帧
  • TFS 签入包含“较大”二进制文件的变更集超时

    我正在执行从 tfs visualstudio 到本地 2012 服务器的 TFS 集成迁移 我遇到了一个特定变更集的问题 该变更集包含多个超过 1 MB 的二进制文件 其中一些文件大小为 15 16 MB 我正在使用本地 TFS 进行远程
  • AngularJS:异步初始化过滤器

    我在尝试使用异步数据初始化过滤器时遇到问题 过滤器非常简单 它需要将路径转换为名称 但要做到这一点 它需要一个对应数组 我需要从服务器获取该数组 在返回函数之前 我可以在过滤器定义中执行一些操作 但是异步方面阻止了这种情况 angular