36

timeago プラグインを使用して、日付をより見栄えよくしたいと考えています。問題は、これらの日付が AngularJS を介して REST から動的に取得されることです。したがって、この jQuery プラグインを自分のページに添付すると、処理されません。

では、そのようなことをよりよく行うにはどうすればよいでしょうか。可能であれば、jQuery をまったく使用せずに実行できれば幸いです。

4

4 に答える 4

103

私は momentjs を使用します - http://momentjs.com/ - 依存関係はありません。

次に、「timeAgo」または「fromNow」というフィルターを作成するだけです。fromNowそれがmomentjsがそれを呼び出すものであるため、おそらくそれを呼び出す必要があります。

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

次に、ビューで単純なデータ バインディングを使用します。

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

本当に jQuery プラグインを使用したい場合は、おそらくディレクティブを作成する必要があります。しかし、その方法は、データを DOM 要素にリンクするため、良くありません。上記の方法は、角度のある方法である DOM からデータを分離します。そして、それはかなりです:-D

于 2013-02-08T14:39:22.127 に答える
20

angular-momentモジュール ( Moment.jsam-time-agoに基づく) のディレクティブを使用できます。

jQuery を必要とせず、時間の経過とともに時間が更新されます。例：

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

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

于 2013-10-09T20:30:22.550 に答える
6

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/

于 2014-08-13T22:14:58.770 に答える
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)

于 2013-02-08T14:43:01.443 に答える