Используйте jQuery timeago или momentjs и AngularJS вместе

Я хочу использовать плагин timeago, чтобы сделать даты более приятными. Проблема в том, что эти даты извлекаются с помощью AngularJS из REST динамически. Поэтому, когда я прикрепляю этот плагин jQuery к своей странице, он просто не обрабатывает его.

Итак, как лучше делать такие вещи? Я был бы счастлив работать без jQuery вообще, если это возможно.

Ответы

Ответ 1

Я бы использовал momentjs - http://momentjs.com/ - он не имеет зависимостей.

Затем вы можете просто создать фильтр с именем "timeAgo" или "fromNow". Вероятно, вы должны называть его fromNow, потому что то, что называет timejs:

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

Тогда вы просто используете простое привязку данных в своем представлении:

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

Если вы действительно хотели использовать плагин jQuery, вам, вероятно, придется написать директиву. Но этот способ плохо, потому что он связывает ваши данные с элементом DOM. То, как я помещаю выше, разделяет данные из DOM, который является способом angular. И это довольно:-D

Ответ 2

Вы можете использовать директиву am-time-ago из angular-moment модуля (который основан на momentjs).

Это не требует jQuery, и время обновляется с течением времени. Пример:

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

Содержимое указанного диапазона будет заменено на относительную временную строку, например "2 часа назад", и будет автоматически обновляться с течением времени.

Ответ 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/

Ответ 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)