Angular.js - 使用间隔应用过滤器

2024-04-04

我正在对日期时间对象使用自定义 angular.js 过滤器:

function relativeTimeFilter()
{
    return function (dateObj) {
        return getRelativeDateTimeString(dateObj);
    };
}

function getRelativeDateTimeString(dt)
{
    if(!dt) return "undefined ago";

    var delta = dt.getSeconds();
    if (delta < 0) return "not yet";
    if (delta < 1 * 60) return delta == 1 ? "one second ago" : delta + " seconds ago";
    if (delta < 2 * 60) return "a minute ago";
    if (delta < 45 * 60) return Math.floor(delta/60) + " minutes ago";
    if (delta < 90 * 60) return "an hour ago";
    if (delta < 24 * (60*60)) return Math.floor(delta/60/60) + " hours ago";
    if (delta < 48 * (60*60)) return "yesterday";
    if (delta < 30 * (24 * (60*60))) return Math.floor(delta/60/60/24) + " days ago";
    if (delta < 12 * (30 * (24 * (60*60))))
    {
        var months = Math.floor(delta/60/60/24/30);
        return (months <= 1) ? "one month ago" : (months + " months ago");
    }
    else
    {
        var years = Math.floor(delta/60/60/24/365);
        return (years <= 1) ? "one year ago" : (years + " years ago");
    }
}

module.filter("relativetime", relativeTimeFilter);

此时,我使用哪个过滤器并不那么重要(我认为)。过滤器接收一个 Datetime 对象。相对时间声明仅有效一秒。意义one second ago必须在一秒钟后更新到2 seconds ago等等。

当我应用过滤器时,这只发生一次。那么如何定期触发过滤装置呢?

我尝试了以下方法:

setInterval(function() {$scope.$apply()}, 1000) // placed in controller function

...没有成功。

有任何想法吗?


我认为你无法通过过滤器来实现这一目标。原因$scope.$apply()不起作用是因为它正在监视数据的变化。由于数据实际上没有改变,因此过滤器永远不会再次被调用。

相反,您需要调整控制器中查看的数据。使用$timeout代替setInterval因为它已融入消化生命周期中。

我会考虑使用指令来执行此操作。

app.directive('relativeTime', function($timeout) {

  function update(scope, element) {
    element.text(getRelativeDateTimeString(scope.actualTime));
    $timeout(function() { update(scope, element); }, 1000);
  }

  return {
    scope: {
      actualTime: '=relativeTime'
    },
    link: function(scope, element) {
      update(scope, element);
    }
  };
});

所以你可以像这样使用指令:

<div relative-time="theDate"></div>

另外,我发现你的一个缺陷getRelativeDateTimeString功能。您需要根据当前时间确定增量。getSeconds只是给你给定时间的秒数:

var delta = parseInt(((new Date().getTime()) - dt.getTime()) / 1000);

这是一个工作CodePen http://codepen.io/BrianGenisio/pen/abuol.

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

Angular.js - 使用间隔应用过滤器 的相关文章

  • 在 onclick 事件上请求麦克风

    有一天 我偶然发现了这个 Javascript 录音机的例子 http webaudiodemos appspot com AudioRecorder index html http webaudiodemos appspot com Au
  • javascript:全局变量泄漏

    每当我向 Firefox 提交插件时 我都会收到一封电子邮件 告诉我我的一些变量正在泄漏到全局范围内 一旦他们告诉我我解决了问题 但在那之前有什么方法 程序 来检查变量是否泄漏到全局范围内 Thanks Both JSLint http w
  • 如何使用 JavaScript 刷新页面?

    如何使用 JavaScript 刷新页面 Use location reload https developer mozilla org en US docs Web API Location reload 例如 每当元素带有以下内容时重新
  • Chrome 开发工具命中代码但未命中断点

    我在 chrome 开发工具上启用了断点 并且在一行上有一个断点 我知道 chrome 正在运行 因为我将断点放在具有以下语句的行上 alert why is this not breaking 如果我在本地主机中找到该文件 则断点有效 断
  • 仅在 Chrome 上我收到此错误:Uncaught TypeError: Illegal constructor [关闭]

    Closed 这个问题是无法重现或由拼写错误引起 help closed questions 目前不接受答案 当我在 Chrome 上加载 jQuery 时 我会收到此错误 Uncaught TypeError Illegal constr
  • 为什么函数声明在不同浏览器中的处理方式不同?

    虽然我在谷歌中找不到对此的引用 但我熟悉这样一个事实 在 javascript 中 全局函数声明在执行任何代码之前都会被解释 换句话说 这工作得很好 f function f 但是 我注意到 chrome 和 firefox 对全局函数声明
  • Rangy:插入符号下的单词(再次)

    我正在尝试创建一个预输入代码以添加到 wysihtml5 富文本编辑器 基本上 我需要能够插入人员 标签引用 例如 Twitter Github Facebook 我发现一些人试图实现同样的事情的代码 http jsfiddle net A
  • 冒泡可用于图像加载事件吗?

    我可以用吗 window addEventListner 某种程度上来说 我所有的图像都有一个display none 图像加载后 我想设置display inline 这样我就可以规范下载图像时显示的内容 在这种情况下 我无法预加载图像
  • 非法使用break语句; javascript

    当这个变量达到一定数量时 我希望循环停止 但我不断收到错误 未捕获的语法错误 非法的中断语句 function loop if isPlaying jet1 draw drawAllEnemies requestAnimFrame loop
  • 嵌套 DIV 的类似斑马的 CSS 样式

    我嵌套了 DIV 元素 但我不知道嵌套的级别 我需要每个都有与其父级不同的背景 创建类似斑马的颜色 我只使用两种背景 深色和白色 效果需要类似于在容器中设置奇数和偶数子级的样式 但在我的例子中 子级是嵌套的 我可以使用每个嵌套元素的规则来做
  • D3 向对象添加超链接?

    我正在尝试制作 D3 图 它将代表我网站的菜单 我尝试按照此处的其他指南添加超链接 但它们都不起作用 每个对象都会有一个不同的 URL 指向 主页 关于 联系方式等 如果添加超链接 我可以拖动对象吗 这意味着如果我按住单击 如果我单击该对象
  • 引用自身的 Javascript 对象...有问题吗?

    由于 Javascript 允许通过引用分配复合值 因此如果 Javascript 对象引用自身 它将创建无限的引用集 如控制台中所示 这看起来像是某种无限循环 但 Chrome 似乎没有问题 这样做是否存在任何内存问题或其他风险 就记忆力
  • Angularjs : $locationProvider.hashPrefix("!") ;

    我想将网址显示为 www test com 因为我正在使用 locationProvider hashPrefix 但它显示网址为 www test com 我想 哈希之前而不是哈希之后 Thanks var app angular mod
  • 使用 ng-if 改变角度方向

    我想通过单击将方向从 rtl 更改为 ltr and in 设置 html
  • 在javascript中创建图像的缩略图方块(不丢失纵横比)

    我正在制作一个客户端拖放文件上传脚本作为书签 在上传之前 我使用 File API 将图像读取为 base64 格式并将其显示为缩略图 This is how my thumbnails look like I want them to l
  • 在 React Web 应用程序中使用 createjs-soundjs

    我想用https www npmjs com package createjs soundjs https www npmjs com package createjs soundjs在 React Web 应用程序上播放声音 我正常安装了
  • 如何使用 javascript 更改文件扩展名

    有谁知道在 Javascript 中更改文件扩展名的简单方法吗 例如 我有一个带有 first docx 的变量 但我需要将其更改为 first html 这将改变字符串包含文件名 let file first docx file file
  • 将 JSON 属性绑定到表单

    我有一个 JSON 对象和一个
  • Keycloak-js updateToken(minValidity) 需要澄清

    我在Keycloak js中阅读了很多该方法的示例 但没有对以下方法进行明确的解释 updateToken minValidity number KeycloakPromise
  • 如何通过点击复制 folium 地图上的标记位置?

    I am able to print the location of a given marker on the map using folium plugins MousePosition class GeoMap def update

随机推荐

  • 在使用“文本”属性规范化文件后,如何强制 git 检出主分支并删除回车符?

    好的 所以我添加了文件 gitattributes像这样的线条 css text js text etc 然后我按照以下说明进行操作http git scm com docs gitattributes checking out and c
  • regExp 用于匹配目录

    我有一个有点复杂的 NetCDF 文件目录结构 我想为其创建 THREDDS 目录 data buoy A0121 realtime A0121 met realtime nc A0121 waves realtime nc etc dat
  • 如何在本地系统中自动复制全局?

    考虑一下 我有一个全局 TEST 并且我想自动在 TEST2 中复制 拥有相同的副本 TEST 上的每个操作集或终止都应自动反映在 TEST2 上 确保这可以 100 可靠地发生的唯一方法是创建一个日志过滤器 它监视 TEST 的更改 然后
  • 如何在 SQL Server 触发器中复制插入、更新、删除的行

    如果用户更改表HelloWorlds 然后我想要 他们所做的操作 他们执行操作的时间 并将原始行的副本插入到HelloWorldsHistory 由于列长度 我希望避免单独触发插入 更新和删除操作 我试过这个 create trigger
  • Docker swarm 尝试解析我的 compose 文件中 ENV 变量的值(因为它有一个 go 模板)并给我一个错误

    错误 我尝试启动一个 logspout 容器并通过 docker compose 文件设置日志格式 ENV 变量 不太难 如果我启动它docker compose up 一切正常 但是当我尝试用 docker 启动它时swarm init
  • 让 .htaccess RewriteRule 重定向到“当前目录中”的脚本(而不是显式路径)

    我在 htaccess 中使用 RewriteRule 进行重定向anything这不是一个现有文件 到一个 cms php 文件 该文件动态处理任何请求 或输出一些错误消息 如果适用 这是我在 htaccess 中执行的操作 Rewrit
  • pyspark:系统找不到指定的路径

    我刚刚使用conda安装了pyspark 2 2 0 在windows 7 64位上使用python v3 6 java v1 8 conda install pyspark 它下载并似乎安装正确 没有错误 现在当我跑步时pyspark在命
  • 在 C 中从字符串转换为枚举

    有没有一种方便的方法来获取字符串 由用户输入 并将其转换为枚举值 在这种情况下 字符串将是枚举值的名称 如下所示 enum Day Sunday 0 Monday 1 这样 如果用户给出一天的名称 它就能够将其解析为相应的枚举值 诀窍是 我
  • 从 Excel/VBA 中的链接自动下载图片的方法是什么?

    情况是这样的 我正在尝试从外部服务器下载一些图片到我的本地计算机上 Excel 文件有一个图片链接 可以打开并下载图片 到目前为止我所尝试的是将超链接转换为文本 图片网址 并运行以下代码 我只是基本熟悉VBA 但对其他语言更熟悉 这是我到目
  • 如何在运行时以编程方式将选项卡添加到表单?

    我用谷歌搜索了这个 但仍然无法让它工作 我知道如何使用工具箱添加选项卡 我还阅读了如何以编程方式执行此操作 但我仍然不明白 MSVC Express 2010 我有一个简单的项目设置 只是一个带有 TabControl 的 Windows
  • 在Datagridview中显示子对象的属性

    如何在 datagridview 中显示对象的选定属性以及第一个对象的成员对象的选定属性 我认为我不会要求绑定 而是依赖硬编码更新 因为更新将在非 UI 线程上启动 而且我认为绑定不会那么容易 至少我在其他项目中遇到过问题 基本上我想了解有
  • 如何执行下一个按钮操作?

    我在显示下一个问题时在 下一步 按钮中遇到问题 在我第一次设置文本时 我得到了正确的问题并匹配了四个选项答案 我需要的是 我有一个 下一步 按钮 用于显示下一个问题和答案 当我单击 下一步 按钮时 我可以获得下一个问题的接下来的四个选项 但
  • 如何在 C# 中绘制面板?

    嘿 我需要在 C 中的面板上进行绘图 但没有将绘图代码放在 panel1 Paint 中 我该怎么做 顺便说一句 我正在使用 WinForms Update 我忘了说清楚 我不需要将绘图代码放在绘图处理程序中 因为我需要根据按钮的事件开始绘
  • 打印一个字符*

    我提前为这个愚蠢的问题道歉 这是我的结构定义 struct vcard char cnet char email char fname char lname char tel 我正在尝试使用函数 vcard show vcard c 打印此
  • 使用 gridSVG 和 ggplot2 v.0.9.0 进行交互式点标签

    我想以交互方式在 ggplot 中标记点 以便将鼠标悬停在点上会显示标签 我正在尝试调整给出的答案这个问题 https stackoverflow com questions 8972642 how do you relate ggplot
  • 贝叶斯评级

    avg num votes 18 Average number of votes in all products avg rating 3 7 Average rating for all products this num votes 6
  • 如何在 Highcharts 组织结构图中启用拖放功能?

    我需要设置一个 组织 类型的 Highcharts 图表 它应该支持相互拖放节点 以移动树内的节点 目前 我得到了一个 组织 图表 其中显示了所有需要的信息 我尝试使用Highcharts plotOptions series dragDr
  • 使用文件夹结构迭代 S3 存储桶中的文件

    我有一个 S3 存储桶 在存储桶内 我们有一个 2018 年的文件夹 以及我们每个月和每天收集的一些文件 例如 2018 3 24 2018 3 25 等等 我们没有将日期放入每天存储桶内的文件中 基本上 我想遍历存储桶并使用文件夹结构按
  • 张量流中值

    如何计算张量流中列表的中值 喜欢 node tf median X X 是占位符在numpy中 我可以直接使用np median来获取中值 如何在tensorflow中使用numpy运算 用于计算数组的中位数tensorflow你可以使用p
  • Angular.js - 使用间隔应用过滤器

    我正在对日期时间对象使用自定义 angular js 过滤器 function relativeTimeFilter return function dateObj return getRelativeDateTimeString date