Javascript AngularJS在语言更改时更改语言环境文件
我们有一个支持多种语言的angularJS应用程序 在我们的主应用程序模块中,我们定义了:Javascript AngularJS在语言更改时更改语言环境文件,javascript,angularjs,Javascript,Angularjs,我们有一个支持多种语言的angularJS应用程序 在我们的主应用程序模块中,我们定义了: .config(function ($translateProvider, $translatePartialLoaderProvider) { $translateProvider.useLoader("$translatePartialLoader", { urlTemplate: "/js/app/i18n/{lang}.json" }); $translat
.config(function ($translateProvider, $translatePartialLoaderProvider) {
$translateProvider.useLoader("$translatePartialLoader", {
urlTemplate: "/js/app/i18n/{lang}.json"
});
$translateProvider
.registerAvailableLanguageKeys(['en', 'fr'], {
'en_US': 'en',
'en_UK': 'en',
'en_CA': 'en',
'fr_FR': 'fr',
'fr_CA': 'fr',
'fr_BE': 'fr',
'*': 'en'
})
.fallbackLanguage('en')
.determinePreferredLanguage();
在主控制器中,我们有一个select来更改lang,调用此函数:
this.changeLang = function () {
$translate.use(self.currentLang).then(function () {
// Here we want to trigger the call to another angular i8ln file
}, function () {
MessageService.show("error", $translate.instant("lang_change_error"));
});
};
但我们希望使用角度i8ln能力来转换一些数据,例如日期选择器
我们知道必须在加载angular应用程序的index.html中加载angular i8ln语言环境文件。这些文件包含以下内容,例如:
'use strict';
angular.module("ngLocale", [], ["$provide", function ($provide) {
var PLURAL_CATEGORY = { ZERO: "zero", ONE: "one", TWO: "two", FEW: "few", MANY: "many", OTHER: "other" };
function getDecimals(n) {
n = n + '';
var i = n.indexOf('.');
return (i == -1) ? 0 : n.length - i - 1;
}
function getVF(n, opt_precision) {
var v = opt_precision;
if (undefined === v) {
v = Math.min(getDecimals(n), 3);
}
var base = Math.pow(10, v);
var f = ((n * base) | 0) % base;
return { v: v, f: f };
}
$provide.value("$locale", {
"DATETIME_FORMATS": {
"AMPMS": [
"AM",
"PM"
],
"DAY": [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday"
],
"ERANAMES": [
"Before Christ",
"Anno Domini"
],
"ERAS": [
"BC",
"AD"
],
"FIRSTDAYOFWEEK": 6,
"MONTH": [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
],
"SHORTDAY": [
"Sun",
"Mon",
"Tue",
"Wed",
"Thu",
"Fri",
"Sat"
],
"SHORTMONTH": [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
],
"STANDALONEMONTH": [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
],
"WEEKENDRANGE": [
5,
6
],
"fullDate": "EEEE, MMMM d, y",
"longDate": "MMMM d, y",
"medium": "MMM d, y h:mm:ss a",
"mediumDate": "MMM d, y",
"mediumTime": "h:mm:ss a",
"short": "y-MM-dd h:mm a",
"shortDate": "y-MM-dd",
"shortTime": "h:mm a"
},
"NUMBER_FORMATS": {
"CURRENCY_SYM": "$",
"DECIMAL_SEP": ".",
"GROUP_SEP": ",",
"PATTERNS": [
{
"gSize": 3,
"lgSize": 3,
"maxFrac": 3,
"minFrac": 0,
"minInt": 1,
"negPre": "-",
"negSuf": "",
"posPre": "",
"posSuf": ""
},
{
"gSize": 3,
"lgSize": 3,
"maxFrac": 2,
"minFrac": 2,
"minInt": 1,
"negPre": "-\u00a4",
"negSuf": "",
"posPre": "\u00a4",
"posSuf": ""
}
]
},
"id": "en",
"localeID": "en",
"pluralCat": function (n, opt_precision) { var i = n | 0; var vf = getVF(n, opt_precision); if (i == 1 && vf.v == 0) { return PLURAL_CATEGORY.ONE; } return PLURAL_CATEGORY.OTHER; }
});
}]);
但是如何根据当前加载的lang加载i8ln文件呢
我尝试使用ng if技巧或字符串插值更改src,但禁止阻止XSS注入
感谢您的帮助。遵循Jack A.的建议,您可以轻松使用angular dynamic locale模块。此模块允许您使用一个简单的函数触发包含区域设置文件 以下是您可以遵循的步骤: 在项目中包括角度动态本地模块 您只需按照屏幕上的步骤操作即可 特别是,不要忘记: 在模块阵列中包含tmhDynamicLocaleProvider模块:在主应用程序模块文件中的模块阵列中包含tmhDynamicLocaleProvider模块:angular.moduleyourApp、[tmh.dynamicClocale,…] 在主应用程序模块中更改区域设置位置配置 应该是这样的:
.config(function ($translateProvider, $translatePartialLoaderProvider) {
$translateProvider.useLoader("$translatePartialLoader", {
urlTemplate: "/js/app/i18n/{lang}.json"
});
$translateProvider
.registerAvailableLanguageKeys(['en', 'fr'], {
'en_US': 'en',
'en_UK': 'en',
'en_CA': 'en',
'fr_FR': 'fr',
'fr_CA': 'fr',
'fr_BE': 'fr',
'*': 'en'
})
.fallbackLanguage('en')
.determinePreferredLanguage();
// Add these lines to configure path
// and set the fallback language the same you defined above
tmhDynamicLocaleProvider.localeLocationPattern('/base/node_modules/angular-i18n/angular-locale_{{locale}}.js');
tmhDynamicLocaleProvider.defaultLocale('en');
})
您必须更改/base/node_modules/angular-i18n/以获得适当的路径。此外,还应确保遵守文件命名约定,例如,在该目录中包含angular-locale_en.js文件
然后,从控制器中,只需使用适当的语言环境参数调用tmhdynamicale.set函数。
在您的代码中,它应该如下所示:
this.changeLang = function () {
$translate.use(self.currentLang).then(function (lang) {
// This line will trigger the file change
tmhDynamicLocale.set(lang);
}, function () {
MessageService.show("error", $translate.instant("lang_change_error"));
});
};
你可以试试这个:谢谢,我不知道。我一定要看一看。谢谢你的详细解释。我会试试的