Desidero utilizzare timeago plugin per rendere le date più belle. Il problema è che queste date vengono recuperate tramite AngularJS dal REST in modo dinamico. Quindi, quando allego questo plugin jQuery alla mia pagina, semplicemente non lo elabora.Utilizzare jQuery timeago o momentjs e AngularJS insieme
Quindi, come fare meglio queste cose? Sarei felice di correre senza jQuery, se possibile.
Vorrei usare momentjs - http://momentjs.com/ - non ha dipendenze.
Quindi è possibile creare un filtro chiamato "timeAgo" o "fromNow". Probabilmente si dovrebbe chiamarla fromNow perché è quello che momentjs lo chiama:
angular.module('myApp').filter('fromNow', function() {
return function(date) {
return moment(date).fromNow();
}
});
Poi si sarebbe solo utilizzare i dati semplici vincolanti nella propria vista:
<p>Pizza arrives {{pizzaArrivalDate | fromNow}}</p>
Se davvero si voleva utilizzare il plugin jQuery, è probabilmente dovrebbe scrivere una direttiva. Ma questo modo di farlo è sbagliato perché collega i tuoi dati a un elemento DOM. Il modo in cui metto sopra separa i dati dal DOM che è il modo angolare. Ed è bello MrGreen
Se hai bisogno di jQuery, scrivere una direttiva/filtro è la strada da percorrere.
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);
};
});
L'utilizzo di una direttiva è l'unico modo per aggiornare automaticamente il datetime nel corso del tempo. – Ztyx
La dipendenza "$ compile" non è necessaria per la direttiva. – Ztyx
La direttiva precedente non gestisce il caso quando la data/ora nell'attributo "titolo" viene generata "{{...}}" sintassi. Vedere https://gist.github.com/JensRantil/5470122 per un miglioramento che risolve questo problema. – Ztyx
È possibile utilizzare la direttiva am-time-ago da angular-moment modulo (che si basa su momentjs).
Non richiede jQuery e l'ora viene aggiornata con il passare del tempo. Esempio:
<span am-time-ago="lastLoginTime"></span>
Il contenuto della campata sopra sarà sostituito con una stringa tempo relativo, per esempio "2 ore fa", e verrà aggiornato automaticamente il passare del tempo.
Grande urish ritrovato! Lavori e aggiornamenti dal vivo come indicato, nota: non dimenticare di aggiungere la dipendenza nella tua app, vedi i documenti di momento angolare. –
@urish: esiste un modo per utilizzare 'am-time-fa' con un formato personalizzato, ad es. "2h" invece di "2 ore fa"? –
Vedi qui per una risposta sulla personalizzazione del formato di 'am-time-ago': http://stackoverflow.com/questions/22964767/how-to-format-angular-moments-am-time-ago-directive – urish
momento.js è la scelta migliore. Ho creato un filtro momento generico che consente di utilizzare qualsiasi metodo di formattazione del momento.
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));
};
}
]);
utilizzarlo come
<div>{{ date | moment:'fromNow' }}</div>
<div>{{ date | moment:'calendar' }}</div>
Puoi esaminare in azione qui http://jsfiddle.net/gregwym/7207osvw/
... ma questa soluzione non fa il tempo si aggiorna il passare del tempo, giusto? – Ztyx
Non funziona. Vorresti una direttiva per questo, una che dovrebbe semplicemente aggiornare l'elemento ogni minuto o poco più (non vuoi che causi un ambito. $ Applicare ogni minuto, basta aggiornare il testo dell'elemento). –
Ci è voluto un po 'per capire come farlo. L'uso della direttiva pubblicata da "kwon" non lo ha fatto per me. Risulta, ho dovuto guardare l'attributo del titolo. Vedi https://gist.github.com/JensRantil/5470122 per un esempio. – Ztyx