一起使用 jQuery timeago 或 momentjs 和 AngularJS

Question

我想使用timeago plugin 使日期看起来更漂亮。问题是这些日期是通过 AngularJS 从 REST 动态获取的。因此，当我将此 jQuery 插件附加到我的页面时，它只是不处理它。

那么，如何更好地做这些事情呢？如果可能的话，我很乐意在没有 jQuery 的情况下运行。

Answer 1

我会使用 momentjs - http://momentjs.com/ - 它没有依赖关系。

然后您可以创建一个名为“timeAgo”或“fromNow”的过滤器。您可能应该将其称为 fromNow，因为 momentjs 就是这样称呼它的：

angular.module('myApp').filter('fromNow', function() {
  return function(date) {
    return moment(date).fromNow();
  }
});

那么您只需在视图中使用简单的数据绑定：

<p>Pizza arrives {{pizzaArrivalDate | fromNow}}</p>

如果你真的想使用 jQuery 插件，你可能不得不写一个指令。但是这样做很糟糕，因为它将您的数据链接到 DOM 元素。我放在上面的方式将数据从 DOM 中分离出来，这是有角度的方式。而且很漂亮:-D

Answer 2

您可以使用来自angular-moment 模块（基于Moment.js）的am-time-ago 指令。

它不需要 jQuery，时间会随着时间的推移而更新。示例：

<span am-time-ago="lastLoginTime"></span>

上面span的内容会被替换成一个相对的时间字符串，比如“2小时前”，随着时间的推移会自动更新。

Answer 3

moment.js 是最好的选择。我创建了一个通用矩过滤器，允许您使用任何矩格式化方法。

angular.module('myApp', [])
  .filter('moment', [
    function () {
      return function (date, method) {
        var momented = moment(date);
        return momented[method].apply(momented, Array.prototype.slice.call(arguments, 2));
      };
    }
  ]);

像这样使用它

<div>{{ date | moment:'fromNow' }}</div>
<div>{{ date | moment:'calendar' }}</div>

您可以在这里查看它的实际操作http://jsfiddle.net/gregwym/7207osvw/

Answer 4

如果你需要 jQuery，写一个指令/过滤器是最好的选择。

app.directive("timeAgo", function($compile) {
  return {  
    restrict: "C",
    link: function(scope, element, attrs) {
      jQuery(element).timeago();
    }
  };
});

app.filter("timeAgo", function() {
  return function(date) {
    return jQuery.timeago(date); 
  };
});

Directive and/or Filter (jsbin)