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

Question

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

我的 HTML 看起来像这样：

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

此代码每天显示一个列表：星期一、星期二...基于 date 这是一个日期对象。

我的第一个尝试是使用已经在这个项目中使用的 moment.js，并且可以很好地处理 i18n。它有效，但是 当用户更改语言时我很难更新它 因为 moment.js 与 angular-translate 无关。

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

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

我想知道有没有什么简单的方法可以解决这个问题，我唯一的想法是生成一个翻译密钥，比如星期一的 DAY.0，DAY.1 自己翻译但听起来很便宜。 moment.js 似乎非常适合这项工作，但是如何 link 使用 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>

然后我在我的应用程序模式配置中设置了 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.

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

How to translate a date object using angular-translate?

angularjs

momentjs

angular-translate