如何使用angular-translate翻译日期对象？

Question

我的视图中有一个日期列表,由我的控制器提供支持.我使用angular-translate来管理我的所有应用程序中的本地化,但不知道如何处理日期对象.

我的HTML看起来像这样:

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

此代码显示一天的列表:星期一,星期二,...基于date哪个是日期对象.

我的第一次尝试是使用已经在这个项目中使用的moment.js,并且与i18n进行了很好的交易.它工作正常,但是当用户改变lang时我很难更新它,因为moment.js与angular-translate无关.

我尝试在我的控制器上使用事件来实现它来更新我的变量,但效果不佳.我想在我的视图中保留对象日期而不是有一个时刻对象,我确信有一种方法不能手动实现它.

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

我想知道是否有一种简单的方法来解决这个问题,我唯一的想法是生成一个像DAY.0周一一样的翻译密钥,DAY.1并自己翻译,但听起来很便宜.moment.js对于这项工作来说似乎很完美,但是如何将它与angular-translate联系起来呢？

谢谢阅读.

Answer 1

好吧经过一些研究后我发现github上的一个名为angular-moment的库对我来说很好.

首先我导入两个js文件+ 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>

然后我在app模式配置期间设置了momentjs语言环境变量

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

configLang.$inject = ['moment'];

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

然后,我可以直接在我的Date对象上开始使用我的模板amFormat指令

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

如果我想在我的应用程序中更改语言,我只需使用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());
});

然后我可以在我的角度应用程序中访问moment.js的所有功能:D.