[英]Dynamically load i18n Angular locale depending on select
I use an select with a list of all countries, populating with an external json-File. 我将select与所有国家/地区的列表一起使用,并填充一个外部json-File。 In this File, I have a key for the i18n locale 'language - Country' for eg 'en-us'. 在此文件中,我具有i18n语言环境“语言-国家”的键,例如“ en-us”。
I get the locale after updating the select. 更新选择后,我得到了语言环境。 Is there a way to dynamicall load the i18n angular, coming from the directory https://code.angularjs.org/1.2.10/i18n/ angular-locale_XX-XX.js ? 是否有一种方法可以动态加载来自目录https://code.angularjs.org/1.2.10/i18n/ angular-locale_XX-XX.js的i18n angular? Thank you for your tips 谢谢你的提示
HTML 的HTML
<select ng-change="updateCountry()" ng-disabled="!data.locations.countries.$resolved" ng-model="selectionCountry" ng-options="country.name for country in data.locations.countries"></select>
SCRIPT 脚本
.controller('MyCtrl', ['$scope','$filter', '$http', '$timeout', '$locale', function($scope, $filter, $http, $timeout, $locale) {
$scope.data = {
locations: {
countries: []
}
};
// set default Country
$scope.data.locations.countries.$default = 'United States';
$scope.data.locations.countries.$resolved = false;
// Populate countries.json in Country Select
$http.get('l10n/countries.json').success(function(countries) {
$scope.data.locations.countries.length = 0;
// actually filter is set to none. to activate choose for e.g. (countries, 'name')
Array.prototype.push.apply($scope.data.locations.countries, $filter('orderBy')(countries, ''));
$scope.selectionCountry || ($scope.selectionCountry = $filter('filter')($scope.data.locations.countries, {name: $scope.data.locations.countries.$default})[0]);
$scope.data.locations.countries.$resolved = true;
});
// get the i18n locale for the selected option
$scope.updateCountry = function() {
var selFormat=$scope.selectionCountry.i18n;
console.log(selFormat);
};
this is what I do 这就是我要做的
var locale = window.navigator.userLanguage || window.navigator.language;
// console.log(locale);
if (locale) {
//change the value for tests
// locale = 'fr-FR';
var smallLocale = locale.toLowerCase();
document.write('<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-i18n/1.4.9/angular-locale_' + smallLocale + '.js"><\/script>');
}
It works fine except there is this message on the console 它工作正常,但控制台上没有此消息
A Parser-blocking, cross-origin script, https://cdnjs.cloudflare.com/ajax/libs/angular-i18n/1.4.9/angular-locale_en-us.js , is invoked via document.write. 通过document.write调用Parser阻止跨源脚本https://cdnjs.cloudflare.com/ajax/libs/angular-i18n/1.4.9/angular-locale_en-us.js 。 This may be blocked by the browser if the device has poor network connectivity. 如果设备的网络连接较差,浏览器可能会阻止此操作。
Ok I got the solution: 好的,我得到了解决方案:
var imported = document.createElement('script');
var fileImport = 'angular-locale_' + selFormat + '.js';
imported.src = 'https://code.angularjs.org/1.2.10/i18n/' + fileImport;
document.head.appendChild(imported);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.