Utilisez jQuery timeago ou momentjs et AngularJS ensemble

Question

Je veux utiliser le plugin timeago pour rendre les dates plus agréables. Le problème est que ces dates sont extraites de manière dynamique via AngularJS à partir du REST. Donc, lorsque je joins ce plugin jQuery à ma page, il ne le traite tout simplement pas.

Alors, comment mieux faire de telles choses? Je serais heureux de courir sans jQuery du tout si possible.

Answer 1

Je voudrais utiliser momentjs - http://momentjs.com/ - il n'a pas de dépendances.

Ensuite, il vous suffit de créer un filtre appelé "timeAgo" ou "fromNow'. Vous devriez probablement appeler fromNow parce que c'est ce momentjs l'appelle:

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

Ensuite, vous utilisez simplement la liaison simple des données dans votre point de vue:

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

Si vous avez vraiment envie d'utiliser le plugin jQuery, vous auriez probablement avoir à rédiger une directive. Mais cette façon de faire est mal parce que c'liens de vos données à un élément du DOM. La façon dont je l'ai mis au-dessus de la crête sépare les données de DOM qui est l'angle moyen. Et c'est joli :-D

Answer 2

Vous pouvez utiliser la directive am-time-ago du module moment angulaire (qui est basé sur momentsjs).

Il ne nécessite pas jQuery et l'heure est mise à jour à mesure que le temps avance. Exemple:

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

Le contenu de la plage ci-dessus sera remplacé par une chaîne de temps relative, par exemple "2 heures auparavant", et sera automatiquement mis à jour au fil du temps.

Answer 3

moment.js est le meilleur choix. J'ai créé un filtre de moment générique qui vous permet d'utiliser la méthode de formatage de n'importe quel moment.

 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));
      };
    }
  ]);
 

Utilisez-le comme

 <div>{{ date | moment:'fromNow' }}</div>
<div>{{ date | moment:'calendar' }}</div>
 

Vous pouvez le commander en action ici http://jsfiddle.net/gregwym/7207osvw/

Answer 4

Si vous avez besoin de jQuery, écrire une directive / un filtre est la voie à suivre.

 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); 
  };
});
 

Directive et / ou filtre (jsbin)