Chcę użyć timeago plugin, aby daty wyglądały ładniej. Problem polega na tym, że te daty są pobierane dynamicznie przez AngularJS z REST. Tak więc, kiedy załączam tę wtyczkę jQuery do mojej strony, po prostu jej nie przetwarzam.Użyj jQuery timeago lub instantjs i AngularJS razem
A więc, jak lepiej robić takie rzeczy? Byłbym szczęśliwy, gdyby w ogóle bez niego działałem bez jQuery.
Używałbym momentjs - http://momentjs.com/ - nie ma żadnych zależności.
Następnie można po prostu utworzyć filtr o nazwie "timeAgo" lub "fromNow". powinieneś nazwać fromNow bo to właśnie momentjs nazywa go:
angular.module('myApp').filter('fromNow', function() {
return function(date) {
return moment(date).fromNow();
}
});
Wtedy po prostu używać prostych wiążące w widoku danych:
<p>Pizza arrives {{pizzaArrivalDate | fromNow}}</p>
Jeśli naprawdę chciał użyć wtyczki jQuery, ty prawdopodobnie musiałby napisać dyrektywę. Ale ten sposób robienia tego jest zły, ponieważ łączy twoje dane z elementem DOM. Sposób, w jaki umieszczam powyższy fragment, oddziela dane od DOM, który jest kanciasty. I to jest ładne :-D
Jeśli potrzebujesz jQuery, pisanie dyrektywy/filtra jest drogą do zrobienia.
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);
};
});
Używanie dyrektywy jest jedynym sposobem na automatyczną aktualizację datetime w miarę upływu czasu. – Ztyx
Zależność "$ compile" jest niepotrzebna dla dyrektywy. – Ztyx
Powyższa dyrektywa nie obsługuje przypadku, gdy datetime w atrybucie "title" jest generowana "{{...}}". Zobacz https://gist.github.com/JensRantil/5470122 dla poprawy, które to rozwiązuje. – Ztyx
Można użyć dyrektywy am-time-ago od angular-moment modułu (który jest oparty na momentjs).
Nie wymaga jQuery, a czas jest aktualizowany wraz z upływem czasu. Przykład:
<span am-time-ago="lastLoginTime"></span>
Zawartość powyżej zakresu zostanie zastąpiony względnej znaków czasu, na przykład „2 godziny temu” i będzie uaktualniany w miarę upływu czasu.
Świetne znalezisko! Prace i aktualizacje działają zgodnie z opisem, pamiętaj: nie zapomnij dodać zależności w swojej aplikacji, zobacz dokumentację z momentem obrotowym. –
@urish: Czy jest jakiś sposób użycia 'am-time-ago' z niestandardowym formatem, np. "2h" zamiast "2 godziny temu"? –
Zobacz tutaj, aby uzyskać odpowiedź na temat dostosowywania formatu "am-time-ago": http://stackoverflow.com/questions/22964767/how-to-formatangular-moments-am-time-ago-directive – urish
moment.js to najlepszy wybór. Stworzyłem ogólny filtr momentu, który pozwala na użycie dowolnej metody formatowania momentu.
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));
};
}
]);
Używaj go jak
<div>{{ date | moment:'fromNow' }}</div>
<div>{{ date | moment:'calendar' }}</div>
można kasie go w akcji tutaj http://jsfiddle.net/gregwym/7207osvw/
... ale to rozwiązanie nie sprawiają, że czas aktualizowane w miarę upływu czasu, prawda? – Ztyx
Nie. Potrzebna byłaby do tego dyrektywa, która po prostu odświeżyłaby element co minutę (nie chcesz, aby powodował zakres. $ Stosuje się co minutę, po prostu aktualizuj tekst elementu). –
Zajęło trochę czasu, aby dowiedzieć się, jak to zrobić. Zastosowanie dyrektywy opublikowanej przez "kwon" nie zrobiło tego za mnie. Okazuje się, musiałem obejrzeć atrybut title. Zobacz przykład: https://gist.github.com/JensRantil/5470122. – Ztyx