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

Question

我有一个日期列表，由我的 Controller 提供支持。我正在使用 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 无关。

我尝试使用事件在我的 Controller 上实现它来更新我的变量，但效果不佳。我想将对象日期保留在我的 View 中，而不是拥有一个时刻对象，我确信有一种方法可以不手动实现它。

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

我想知道是否有一种简单的方法可以解决这个问题，我唯一的想法是生成一个像 DAY.0 这样的翻译 key 。周一， DAY.1并由我自己翻译，但听起来很便宜。 moment.js 似乎非常适合这项工作，但是如何将它与 angular-translate 联系起来呢？

谢谢阅读。

Answer 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);我的 View 会自动更新。

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