Come tradurre un oggetto data usando angular-translate?

Question

Ho un elenco di date a mio avviso, alimentato dal mio controller. Sto usando angular-translate per gestire la localizzazione in tutte le mie applicazioni ma non so come gestire l'oggetto data.

mio HTML simile a questa:

visualizzazione

<div ng-repeat="date in nextDates"> 
    <div class="day">{{date | date: 'EEEE'}}</div> 
</div> 

Questo codice una lista al giorno: Lunedi, Martedì, ... basa su date che è un oggetto data.

Il mio primo tentativo è stato quello di utilizzare moment.js che è già utilizzato in questo progetto e che si adatta molto bene con i18n. Funziona, ma Ho avuto molte difficoltà ad aggiornarlo quando lang è cambiato dall'utente poiché moment.js non è correlato a angular-translate.

Ho provato a implementarlo sul mio controller utilizzando un evento per aggiornare la mia variabile ma non ha funzionato bene. Vorrei mantenere la data dell'oggetto nella mia vista invece di avere un oggetto moment, sono sicuro che c'è un modo per non implementarlo manualmente.

$scope.$on('translationChanged', function(event, lang) { 
    ... 
}); 

Vorrei sapere se c'è un modo semplice per risolvere questo problema, la mia unica idea è quella di generare una chiave per la traduzione come DAY.0 per Lunedi, DAY.1 e tradurlo da solo ma sembra a buon mercato. moment.js sembra perfetto per il lavoro, ma come collegarlo con angular-translate?

Grazie per la lettura.

Answer 1

OK così dopo alcune ricerche ho trovato una libreria su github chiamata angular-moment che funziona bene per me.

Per prima cosa ho importare sia js file + di locale

<script src="bower_components/moment/moment.js"></script> 
<script src="bower_components/angular-moment/angular-moment.js"></script> 
<script src="bower_components/moment/locale/fr.js"></script> 
<script src="bower_components/moment/locale/de.js"></script> 
<script src="bower_components/moment/locale/it.js"></script> 

Poi ho istituito momentjs variabile locale durante la mia app modalità config

var core = angular.module('app.core').config(configLang); 

configLang.$inject = ['moment']; 

/* @ngInject */ 
function configLang(moment) { 
    moment.locale('en'); 
} 

ho quindi possibile iniziare a utilizzare nel mio template direttiva amFormat direttamente sul my Date object

<div ng-repeat="date in nextDates"> 
    <div class="day">{{date | amDateFormat:'dddd'}}</div> 
</div> 

Se voglio cambiare lingua nella mia app, ho solo usa moment.locale (String); e la mia vista viene automaticamente aggiornata.

$rootScope.$on('$authenticationStateChanged', function(event, userData, isAuthenticated) { 
    moment.locale(userData.currentLanguage.toLowerCase()); 
}); 

$scope.$on('translationChanged', function(event, lang) { 
    moment.locale(lang.toLowerCase()); 
}); 

Posso quindi accedere a tutti la potenza di moment.js nella mia app angolare: D.