如何使用angular-translate翻译日期对象? [英] How to translate a date object using angular-translate?

问题描述

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

I have a list of date in my view, powered by my controller. I am using angular-translate to manage localisation in my all application but do not know how to deal with date object.

我的HTML看起来像这样:

My HTML looks like this :

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

此代码根据日期对象date显示一天的列表:星期一，星期二，....

This code display a list a day : Monday, Tuesday, ... based on date which is a date object.

我的第一个尝试是使用此项目中已使用的moment.js，并与i18n进行很好的处理.它可以工作，但是当用户更改lang时，我很难更新它，因为moment.js与angular-translate不相关.

My first try was to use moment.js which is already used in this project, and deal really well with i18n. It works, but I had a lot of difficulty to update it when lang is changed by user since moment.js is not related to angular-translate.

我尝试使用事件更新变量来在控制器上实现它，但是效果不佳.我想在对象视图中保留对象日期，而不是使用瞬间对象，我敢肯定有一种方法可以不手动实现.

I tried to implement it on my controller using an event to update my variable but didn't worked well. I would like to keep the object date in my view instead of having a moment object, I am sure there is a way not implementing it manually.

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

我想知道是否有解决此问题的简便方法，我唯一的想法是生成一个翻译密钥，如星期一的DAY.0和DAY.1自己翻译，但这听起来很便宜. moment.js似乎很适合这项工作，但是如何将其与angular-translate链接起来?

I would like to know if there is an easy way to solve this issue, my only idea is to generate a key for translation like DAY.0 for Monday, DAY.1 and translate it by myself but it sounds cheap. moment.js seems perfect for the job, but then how to link it with angular-translate ?

感谢阅读.

推荐答案

好的，因此，经过一些研究，我在github上找到了一个名为 angular的库-moment 对我来说很好.

OK so after some research I found a library on github called angular-moment which work fine for me.

首先，我导入了两个js文件和语言环境

First I import both js files + 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语言环境变量

Then I set up momentjs locale variable during my app mode config

var core = angular.module('app.core').config(configLang);

configLang.$inject = ['moment'];

/* @ngInject */
function configLang(moment) {
    moment.locale('en');
}

然后我可以直接在Date对象上直接在模板中使用amFormat指令

I then can start using in my templates amFormat directive directly on my Date object

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

如果我想在应用程序中更改语言，则只需使用moment.locale(String);即可.并且我的视图会自动更新.

If I want to change language in my app, I just use moment.locale(String); and my view is automatically updated.

$rootScope.$on('$authenticationStateChanged', function(event, userData, isAuthenticated) {
    moment.locale(userData.currentLanguage.toLowerCase());
});

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

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

I can then access all the power of moment.js in my angular app :D.

这篇关于如何使用angular-translate翻译日期对象?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！