我的英语i18n翻译json文件assets/i18n/en.json
如下所示(这是英文翻译,我在同一目录中有其他语言的其他文件):
{
"project": {
"SPONSORINFO": {
"MAIN" : "Select the Sponsor Name",
"SPONSORLIST": [
{"spons" :"SponsorName 1" },
{"spons" :"SponsorName 2" }
]
}
}
}
这是我的html视图:
<div class="form-group" >
<label for="form-field-select-1" translate="project.SPONSORINFO.MAIN">
</label>
<select class="form-control" ng-model="myModel.sponsors">
<option ng-repeat="s in spons.SPONSORLIST" value="{{s.spons}}">{{s.spons}}</option>
</select>
</div>
标签中的translate="project.SPONSORINFO.MAIN"
正确显示值“选择赞助商名称”。这方面没问题。
如何在下拉菜单中重复SPONSORLIST列表中的项目?
我现在所拥有的并没有像你猜的那样展示任何东西。
我的main.js中有一个全局配置,如下所示:
app.config(['$translateProvider',
function ($translateProvider) {
// prefix and suffix information is required to specify a pattern
// You can simply use the static-files loader with this pattern:
$translateProvider.useStaticFilesLoader({
prefix: 'assets/i18n/',
suffix: '.json'
});
// Since you've now registered more then one translation table, angular-translate has to know which one to use.
// This is where preferredLanguage(langKey) comes in.
$translateProvider.preferredLanguage('en');
// Store the language in the local storage
$translateProvider.useLocalStorage();
}]);
但我的视图控制器中没有关于翻译的任何参考。
index.html
:
app.controller('AppCtrl', ['$rootScope', '$scope', '$state', '$translate',
function ($rootScope, $scope, $state, $translate) {
$scope.language = {
// Handles language dropdown
listIsOpen: false,
// list of available languages
available: {
'en': 'English',
//'it_IT': 'Italiano',
'de_DE': 'Deutsch'
},
// display always the current ui language
init: function () {
var proposedLanguage = $translate.proposedLanguage() || $translate.use();
var preferredLanguage = $translate.preferredLanguage();
// we know we have set a preferred one in app.config
$scope.language.selected = $scope.language.available[(proposedLanguage || preferredLanguage)];
},
set: function (localeId, ev) {
$translate.use(localeId);
$scope.language.selected = $scope.language.available[localeId];
$scope.language.listIsOpen = !$scope.language.listIsOpen;
}
};
$scope.language.init();
在我的视图控制器中,当我手动加载en.json
文件时,我的下拉菜单可以正常工作。
$http.get('assets/i18n/en.json').success(function(data) {
$scope.projectJSON = data;
});
使用ng-repeat:
<option ng-repeat="s in projectJSON.project.SPONSORINFO.SPONSORLIST" value="{{s.spons}}">{{s.spons | translate}}</option>
但我不知道如何从环境中加载所选语言,以便自动加载首选语言文件。我的尝试是以下但不起作用:
$scope.language.selected = function (localeId) {
$translate.use(localeId);
$http.get('assets/i18n/'+localeId+'.json').success(function(data) {
$scope.projectJSON= data;
});
};
var lang = $translate.use();
$http.get('assets/i18n/'+lang+'.json').success(function(data) {
$scope.projectJSON= data;
});
现在的问题是:
这解决了我的问题,但是当我更改语言,使用mainCtrl.js翻译的菜单和其他翻译时,使用translate="project.SPONSORINFO.MAIN"
就像上面示例中的label
一样,它们会更新立即。但是,当我使用我的函数加载所选语言并将其传递到$http
函数以加载所选语言文件时,菜单不会立即更改为所选语言,我需要刷新页面和然后他们被翻译了。
如何修复此错误?我怎么能不通过这个功能并在mainCtrl.js
正在使用的label
中使用它?
答案 0 :(得分:1)
您可以使用angular-translate的翻译过滤器来实现此目的。通常,过滤器的工作原理如下:
<ANY>{{'TRANSLATION_ID' | translate}}</ANY>
在你的情况下它应该是这样的:
<option ng-repeat="s in project.SPONSORINFO.SPONSORLIST" value="{{s.spons}}">{{s.spons | translate}}</option>