Pertanyaan Gunakan timeago jQuery atau momentjs dan AngularJS bersama-sama


Saya ingin menggunakannya Plugin timeago untuk membuat kencan terlihat lebih baik. Masalahnya adalah bahwa tanggal ini diambil melalui AngularJS dari REST secara dinamis. Jadi, ketika saya melampirkan plugin jQuery ini ke halaman saya, itu tidak memprosesnya.

Jadi, bagaimana cara melakukannya dengan lebih baik? Saya akan senang untuk berlari tanpa jQuery sama sekali jika memungkinkan.


36
2018-02-08 14:14


asal


Jawaban:


Saya akan menggunakan momentjs - http://momentjs.com/ - tidak memiliki ketergantungan.

Kemudian Anda bisa membuat filter yang disebut 'timeAgo' atau 'fromNow'. Anda mungkin harus menyebutnya fromNow karena itulah yang sesaat menyebutnya:

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

Maka Anda hanya akan menggunakan pengikatan data sederhana dalam tampilan Anda:

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

Jika Anda benar-benar ingin menggunakan plugin jQuery, Anda mungkin harus menulis arahan. Tetapi cara melakukannya itu buruk karena menghubungkan data Anda ke elemen DOM. Cara saya menempatkan data di atas memisahkan dari DOM yang merupakan cara sudut. Dan itu cantik :-D


101
2018-02-08 14:39



Anda dapat menggunakan am-time-ago direktif dari momen bersudut modul (yang didasarkan pada momentjs).

Tidak memerlukan jQuery, dan waktu diperbarui seiring berjalannya waktu. Contoh:

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

Konten rentang di atas akan diganti dengan string waktu relatif, misalnya "2 jam yang lalu", dan akan diperbarui secara otomatis seiring berjalannya waktu.


20
2017-10-09 20:30



moment.js adalah pilihan terbaik. Saya telah membuat filter momen generik yang memungkinkan Anda untuk menggunakan metode pemformatan kapan saja.

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

Gunakan itu seperti

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

Anda dapat melakukan checkout di sini http://jsfiddle.net/gregwym/7207osvw/


6
2017-08-13 22:14



Jika Anda membutuhkan jQuery, menulis arahan / filter adalah cara yang tepat.

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

Petunjuk dan / atau Filter (jsbin)


4
2018-02-08 14:43