javascript 一起使用 jQuery timeago 或 momentjs 和 AngularJS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14774486/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Use jQuery timeago or momentjs and AngularJS together
提问by Sergei Basharov
I want to use timeago pluginto make dates look nicer. The problem is that these dates are fetched via AngularJS from the REST dynamically. So, when I attach this jQuery plugin to my page, it just doesn't process it.
我想使用timeago 插件使日期看起来更好。问题是这些日期是通过 AngularJS 从 REST 动态获取的。因此，当我将此 jQuery 插件附加到我的页面时，它只是不处理它。
So, how to better do such things? I would be happy to run without jQuery at all if possible.
那么，如何更好地做这样的事情呢？如果可能的话，我很乐意在没有 jQuery 的情况下运行。
回答by Andrew Joslin
I would use momentjs - http://momentjs.com/- it has no dependencies.
我会使用 momentjs - http://momentjs.com/- 它没有依赖项。
Then you can just create a filter called 'timeAgo' or 'fromNow'. You should probably call it fromNowbecause that's what momentjs calls it:
然后您可以创建一个名为“timeAgo”或“fromNow”的过滤器。您可能应该调用它，fromNow因为这就是 momentjs 所称的：
angular.module('myApp').filter('fromNow', function() {
return function(date) {
return moment(date).fromNow();
}
});
Then you would just use simple data binding in your view:
然后您只需在您的视图中使用简单的数据绑定：
<p>Pizza arrives {{pizzaArrivalDate | fromNow}}</p>
If you really wanted to use the jQuery plugin, you would probably have to write a directive. But that way of doing it is bad because it links your data to a DOM element. The way I put above seperates data from DOM which is the angular way. And it's pretty :-D
如果您真的想使用 jQuery 插件，则可能必须编写指令。但这种做法很糟糕，因为它将您的数据链接到 DOM 元素。我上面的方式将数据与 DOM 分开，这是一种角度方式。而且很漂亮:-D
回答by urish
You can use the am-time-agodirective from angular-momentmodule (which is based on Moment.js).
您可以使用angular-moment模块（基于Moment.js）中的am-time-ago指令。
It does not require jQuery, and the time get updated as time progresses. Example:
它不需要 jQuery，并且时间会随着时间的推移而更新。例子：
<span am-time-ago="lastLoginTime"></span>
The content of the above span will be replaced with a relative time string, for example "2 hours ago", and will be automatically updated as time progresses.
上述span的内容会被替换为相对时间字符串，例如“2 hours ago”，并且会随着时间的推移自动更新。
回答by Greg Wang
moment.js is the best choice. I have created a generic moment filter that allow you to use any moment formatting method.
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));
};
}
]);
Use it like
使用它就像
<div>{{ date | moment:'fromNow' }}</div>
<div>{{ date | moment:'calendar' }}</div>
You can checkout it in action here http://jsfiddle.net/gregwym/7207osvw/
你可以在这里查看它的操作http://jsfiddle.net/gregwym/7207osvw/
回答by nowk
If you need jQuery, writing a directive/filter is the way to go.
如果您需要 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);
};
});
