javascript - 一起使用 jQuery timeago 或 momentjs 和 AngularJS

Question

我想使用timeago 插件让日期看起来更好。问题是这些日期是通过 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); 
  };
});

指令和/或过滤器 (jsbin)