Tarihleri daha güzel göstermek için timeago plugin numaralı telefonu kullanmak istiyorum. Sorun şu ki, bu tarihler REST'den AngularJS ile dinamik olarak getirilir. Bu yüzden, bu jQuery eklentisini sayfama eklediğimde, işlenmiyor.jQuery timeago veya momentleri ve AngularJS öğelerini birlikte kullanın
Peki, böyle şeyler nasıl yapılır? Mümkünse jQuery olmadan çalışmaktan mutlu olurum.
Ben momentjs kullanırsınız - http://momentjs.com/ - hiçbir bağımlılığı yoktur.
Daha sonra 'timeAgo' veya 'fromNow' adlı bir filtre oluşturabilirsiniz. O momentjs bu isimle adlandırıyor çünkü Muhtemelen fromNow aramak gerekir: Eğer sadece görünümde bağlayıcı basit veri kullanmak olacaktır
angular.module('myApp').filter('fromNow', function() {
return function(date) {
return moment(date).fromNow();
}
});
: Gerçekten jQuery eklentisi kullanmak istiyorsa
<p>Pizza arrives {{pizzaArrivalDate | fromNow}}</p>
, sen Muhtemelen bir direktif yazmalı. Fakat bunu yapmanın bu yolu kötüdür çünkü verilerinizi bir DOM öğesine bağlar. Yukarıda belirttiğim şekilde, verileri DOM'dan açısal şekilde ayırır. Ve güzel: -D
jQuery'ye ihtiyacınız varsa, bir yönerge/filtre yazmanın yolu budur.
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);
};
});
Bir yönerge kullanmak, zaman ilerledikçe datetime'nin otomatik olarak güncellenmesini sağlamanın tek yoludur. – Ztyx
Yönerge için "$ compile" bağımlılığı gerekli değildir. – Ztyx
Yukarıdaki yönerge, "başlık" özniteliğindeki datetime "{{...}}" sözdizimi üretildiğinde durumu ele almaz. Bunu gideren bir iyileştirme için https://gist.github.com/JensRantil/5470122 adresine bakın. – Ztyx
Sen (momentjs dayanmaktadır) angular-moment modülünden am-time-ago yönergesini kullanabilirsiniz.
jQuery gerektirmez ve zaman ilerledikçe zaman güncellenir. Örnek:
<span am-time-ago="lastLoginTime"></span>
yukarıdaki yayılma alanının içeriği "2 saat önce" Örneğin, göreceli bir zaman dize ile değiştirilecek ve zaman ilerledikçe otomatik olarak güncellenecektir.
Mükemmel bulmak ürpertici! İşler ve güncellemeler, belirtildiği gibi canlı olarak yayınlanır: Not: Uygulamanızda bağımlılığı eklemeyi unutmayın, açısal andaki dokümanlara bakın. –
@urish: Özelleştirilmiş bir biçime sahip, örneğin, am-time-once işlevini kullanmanın herhangi bir yolu var mı? "2 saat önce" yerine "2 saat"? –
'biçimini özelleştirme hakkında bir cevap burada am See zamanlı ago': http://stackoverflow.com/questions/22964767/how-to-format-angular-moments-am-time-ago-directive – urish
moment.js en iyi seçimdir. Herhangi bir an formatlama yöntemini kullanmanıza izin veren genel bir moment filtresi oluşturdum.
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));
};
}
]);
eylem ödeme yapabilirsiniz
gibi kullanın ... ancak bu çözüm, doğru zaman ilerledikçe zaman güncellenmedi yapmaz? – Ztyx
Yapmıyor. Bunun için, her dakika ya da öylesine öğeyi yenileyecek bir yönerge istersiniz (bir kapsam oluşturmasını istemezsiniz. $ Her dakika uygulayın, sadece öğenin metnini güncelleyin). –
Nasıl yapılacağını anlamak için biraz zaman ayırın. "Kwon" tarafından yayınlanan direktifin kullanılması benim için yapmadı. Çıkıyor, başlık özelliğini izlemeliydim. Örnek için https://gist.github.com/JensRantil/5470122 adresine bakın. – Ztyx