Питання Використовуйте jQuery timeago або momentjs і AngularJS разом


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

Отже, як краще робити такі речі? Я б із задоволенням запустив би без jQuery взагалі, якщо можливо.


36
2018-02-08 14:14


походження




Відповіді:


Я хотів би скористатися momentjs - http://momentjs.com/ - він не має залежностей.

Тоді ви можете просто створити фільтр "timeAgo" або "fromNow". Ви, ймовірно, маєте назвати це fromNow тому що саме це називає момент:

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

Тоді ви б просто скористалися простим прив'язуванням даних на ваш погляд:

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

Якщо ви дійсно хочете використовувати плагін jQuery, вам, мабуть, доведеться написати директиву. Але такий спосіб зробити це погано, оскільки він зв'язав ваші дані з елементом DOM. Спосіб, який я наводить вище, відділяє дані від DOM, що є кутовий способом. І це досить :-D


101
2018-02-08 14:39



... але це рішення не дає часу оновлюватися, коли йде час, вірно? - Ztyx
Це не. Ви хотіли б отримати директиву для цього, яка могла б просто оновити елемент кожну хвилину (ви не хочете, щоб це спричинило сферу застосування. $ Застосовується кожну хвилину, просто оновіть текст елемента). - Andrew Joslin
Потрібно, щоб з'ясувати, як це зробити. Використання директиви, опублікованого "kwon", не зробило це для мене. Виявляється, я повинен був спостерігати атрибут назви. Побачити gist.github.com/JensRantil/5470122 для прикладу. - Ztyx
Слід зазначити, що посилання на нього moment від такої глобальної змінної, яка насправді не відповідає кращим практикам. ін'єкційний $window і отримати це через $window.moment буде краще ... В ідеалі, проте, ви створили б службу для moment що ви можете ввести у свій фільтр. Це дозволить вам змінити вашу реалізацію на більш пізньому етапі через DI та / або тестування блоку більш ефективно. ... їжа для роздумів. - Ben Lesh
^ так, так як це було б перевіряти. Кудо для м'яса - Andrew Joslin


Ви можете скористатись am-time-ago директива від кутовий момент модуль (який заснований на момент часу).

Це не вимагає jQuery, і час оновлюється за часом. Приклад:

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

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


20
2017-10-09 20:30



Великий знахідка! Працює та оновлюється, як зазначено, примітка: Не забудьте додати залежність у вашому додатку, перегляньте документи з кутом моменту. - Andrew Lank
@urish: Чи є який-небудь спосіб використовувати am-time-ago з користувацьким форматом, наприклад "2 години" замість "2 години тому"? - Misha Moroshko
Дивіться тут, щоб отримати відповідь про налаштування формату am-time-ago: stackoverflow.com/questions/22964767/... - urish


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/


6
2017-08-13 22:14





Якщо вам потрібен 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)


4
2018-02-08 14:43



Використання директиви є єдиним способом автоматично оновлювати datetime за часом. - Ztyx
Залежність "$ compile" не є обов'язковою для директиви. - Ztyx
Вищезазначена директива не розглядає справу, коли в datetime у атрибуті title створюється синтаксис {{...}}. Побачити gist.github.com/JensRantil/5470122 для покращення, що виправляє це. - Ztyx