使用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>

上述跨度的内容将替换为相对时间字符串,例如"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/