Verwenden Sie jQuery timeago oder momentjs und AngularJS zusammen

Möchte ich timeago plugin zu machen, Termine schöner Aussehen. Das problem ist, dass diese Daten abgerufen werden, die über AngularJS von dem REST dynamisch. Also, Wann lege ich das jQuery plugin auf meiner Seite, es funktioniert einfach nicht verarbeiten.

So, wie man besser, solche Dinge zu tun? Ich wäre glücklich ohne jQuery überhaupt, wenn möglich.

InformationsquelleAutor der Frage Sergei Basharov | 2013-02-08

  1. 101

    Ich würde momentjs - http://momentjs.com/ - es hat keine Abhängigkeiten.

    Dann können Sie einfach erstellen Sie einen filter namens "timeAgo" oder "fromNow'. Sie sollten wahrscheinlich nennen es fromNow weil das, was momentjs es nennt:

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

    Dann würden Sie nur verwenden einfache Datenbindung in Sicht:

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

    Wenn Sie wirklich wollen, verwenden Sie die jQuery-plugin, würden Sie wahrscheinlich haben zu schreiben, eine Richtlinie. Aber so zu tun, es ist schlecht, weil Sie links Ihre Daten ein DOM-element. Die Art, wie ich oben trennt Daten aus dem DOM-das ist der kantige Art und Weise. Und es ist ziemlich 😀

    InformationsquelleAutor der Antwort Andrew Joslin

  2. 20

    Können Sie die am-time-ago Richtlinie von angular-moment - Modul (basierend auf momentjs).

    Es nicht erforderlich, jQuery, und die Zeit aktualisiert werden wie die Zeit fortschreitet. Beispiel:

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

    Den Inhalt der oben genannten Zeitspanne ersetzt wird, die mit einer relativen Zeit-Zeichenkette, z.B. "2 Stunden", und wird automatisch aktualisiert, wie die Zeit fortschreitet.

    InformationsquelleAutor der Antwort urish

  3. 6

    moment.js ist die beste Wahl. Habe ich eine generische moment-filter, mit denen Sie mit jedem moment, Formatierung Methode. 

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

    Verwenden Sie es wie

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

    Können Sie Kasse es in Aktion hier http://jsfiddle.net/gregwym/7207osvw/

    InformationsquelleAutor der Antwort Greg Wang

  4. 4

    Wenn Sie brauchen, jQuery, schreiben eine Richtlinie/filter ist der Weg zu gehen.

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

    Richtlinie und/oder Filter (jsbin)

    InformationsquelleAutor der Antwort nowk

Schreibe einen Kommentar