web-dev-qa-db-ja.com

jQuery timeagoまたはmomentjsとAngularJSを一緒に使用する

私は timeago plugin を使用して日付をより見栄えよくしたいと思います。問題は、これらの日付がRESTから動的にAngularJSを介してフェッチされることです。そのため、このjQueryプラグインを自分のページに接続すると、処理されません。

それで、そのようなことをよりよくする方法は？可能であれば、jQueryなしで実行したいです。

javascriptjqueryhtmlangularjs
36
Sergei Basharov

私は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からデータを分離します。これは、angularの方法です。そして、それはきれいです:-D

103
Andrew Joslin

am-time-agoディレクティブ angular-moment モジュール（これは Moment.js に基づいています）。

JQueryは必要なく、時間の経過とともに時間が更新されます。例：

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

上記のスパンのコンテンツは、「2時間前」などの相対時間文字列に置き換えられ、時間の経過とともに自動的に更新されます。

20
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
Greg Wang

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
nowk