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

发布时间：2020-12-17 07:12:45 所属栏目：安全来源：网络整理

导读：我的视图中有一个日期列表,由我的控制器提供支持.我使用 angular-translate管理我的所有应用程序中的本地化,但不知道如何处理日期对象. 我的HTML看起来像这样： div ng-repeat="date in nextDates" div class="day"{{date | date: 'EEEE'}}/div/div 此代码显

我的视图中有一个日期列表,由我的控制器提供支持.我使用 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.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!