2015-04-20 2 views
6

У меня есть список дат в моем представлении, приведенный в действие моим контроллером. Я использую angular-translate для управления локализацией в моем приложении, но не знаю, как обращаться с объектом даты.Как перевести объект даты с помощью углового перевода?

Мой HTML выглядит следующим образом:

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

Этот код отображения списка в день: понедельник, вторник, ... на основе date, который является объектом даты.

Моя первая попытка была использовать moment.js, который уже используется в этом проекте, и отлично справляется с i18n. Это работает, но У меня было много проблем с обновлением, когда пользователь менял пользователь, так как moment.js не связан с угловым переводом.

Я попытался реализовать его на своем контроллере, используя событие для обновления моей переменной, но не работал хорошо. Я хотел бы сохранить дату объекта в своем представлении, вместо того, чтобы иметь мгновенный объект, я уверен, что есть способ не реализовать его вручную.

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

Я хотел бы знать, если есть простой способ решить эту проблему, моя единственная идея состоит в том, чтобы сгенерировать ключ для перевода как DAY.0 на понедельник, DAY.1 и перевести его на себя, но это звучит дешево. moment.js кажется идеальным для работы, но тогда как связать его с угловым переводом?

Спасибо за чтение.

ответ

7

ОК, поэтому после некоторых исследований я нашел библиотеку на github под названием angular-moment, которая отлично работает для меня.

Сначала я импортировать и JS файлы + локали

<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> 

Затем я создал momentjs локальной переменной во время моего приложения в режиме конфигурации

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

configLang.$inject = ['moment']; 

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

Я тогда можно начать использовать в своей шаблоны директивы amFormat непосредственно на мой объект Дата

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

Если я хочу изменить язык в своем приложении, я просто use moment.locale (String); и мой взгляд автоматически обновляется.

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

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

Затем я могу получить доступ ко всей мощности момента.js в своем угловом приложении: D.

Смежные вопросы