如何使用角度翻译翻译日期对象？答案

【问题标题】：How to translate a date object using angular-translate?如何使用角度翻译翻译日期对象？
【发布时间】：2015-04-20 08:06:59
【问题描述】：

我的视图中有一个日期列表，由我的控制器提供支持。我正在使用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 链接？

感谢阅读。

【问题讨论】：

标签： angularjs momentjs angular-translate

【解决方案1】：

好的，经过一番研究，我在 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');
}

然后我可以在我的模板中直接在我的 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());
});

然后我可以在我的 Angular 应用程序中访问 moment.js 的所有功能：D。

【讨论】：