微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

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

我的HTML看起来像这样:

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

代码显示一天的列表:星期一,星期二,…基于作为日期对象的日期.

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

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

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

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

谢谢阅读.

解决方法

好吧经过一些研究后我在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>

然后我在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',userData,isAuthenticated) {
    moment.locale(userData.currentLanguage.toLowerCase());
});

$scope.$on('translationChanged',lang) {
    moment.locale(lang.toLowerCase());
});

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐