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

中设置了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。

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

1 个答案: