angularjs ng-重复来自不同i18n文件的下拉值 [英] angularjs ng-repeat the dropdown values from different i18n files

问题描述

以下是英语的json i18n语言文件示例：

Here is an example json i18n language file for English:

{
  "project": {
    "SPONSORINFO": {
      "MAIN" : "Select the Sponsor Name",
      "SPONSORLIST": [
        {"spons" :"SponsorName 1" },
        {"spons" :"SponsorName 2" }
      ]
    }
  }
}

这是我的html视图：

and here is my html view:

<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 projectJSON.project.SPONSORINFO.SPONSORLIST" value="{{s.spons}}">{{s.spons | translate}}</option>
    </select>
</div>

translate =project.SPONSORINFO.MAIN单击语言切换后，标签正确显示值选择赞助商名称（无需刷新）。

The translate="project.SPONSORINFO.MAIN" in the label is rightly showing the value "Select the Sponsor Name" as soon as the language toggle is clicked (no refresh is needed).

我在视图控制器中使用以下函数根据所选语言加载语言文件并传递给它进入 $ scope.projectJSON ，以便我可以在我的html视图中的 ng-repeat 中调用它：

I am using the following function in my view controller to load the language file based on the selected language and pass it into $scope.projectJSON so that I can call it in ng-repeat in my html view:

var lang = $translate.use();
$http.get('assets/i18n/'+lang+'.json').success(function(data) {
    $scope.projectJSON= data;
});

问题是切换语言后，下拉菜单不会改变除非我刷新或更改视图并返回，否则使用所选语言如何解决此问题，使其像标签一样工作？

我的 main.js 中的翻译全局配置如下：

Translation global config in my main.js like the following:

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();

}]);

我的 mainCtrl.js 中的翻译配置：

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();

推荐答案

您正在从翻译json文件迭代数组。此翻译json文件由 $ translate 服务加载，您将无法访问已加载的内容，但您需要此json文件中的数据进行迭代，因此您必须提出自己的请求来获取此数组。也许你不想要，但你必须让 $ http.get 来电。

You are iterating array from translation json file. This translation json file is loaded by $translate service and you will not have access on loaded content, but you need the data from this json file to iterate it, thus you have to make your own request to fetch this array. Maybe you do not want but you have to make $http.get call.

在你的代码中，一个请求是执行此行 var lang = $ translate.use（newLang）; ，第二次调用由 $ http.get 但是如果 $ http.get 在 $ translate.use 中的呼叫被解决之前解决了它将不会在下拉列表中翻译内容，因为 $ translate.use 中的请求尚未解决且 $ translate 服务没有这些翻译翻译。

In your code one request is made by executing this line var lang = $translate.use(newLang); and second call is done by $http.get BUT in case if $http.get is resolved before call in $translate.use is resolved It will not translate content in dropdown because request in $translate.use is not resolved yet and $translate service does not have these translations to translate.

你可以做的是听 $ translateChangeSuccess 事件（由 $ rootScope 上的> $ translate service）然后在此处理程序中进行ajax调用。

What you can do is to listen on $translateChangeSuccess event (emitted by $translate service) on $rootScope and then make your ajax call in this handler.

我在您的示例中测试了以下代码，它运行正常。

I have tested the following code in your example and it works fine.

$rootScope.$on('$translateChangeSuccess', function () {
  // Get new current new language
  var lang = $translate.use();
  $http.get('assets/i18n/'+lang+'.json').success(function(data) {
    $scope.projectJSON = data;
  });
});

有关角度翻译模块的事件部分的详细说明，结帐此链接。

For detailed explanation about events section on angular translate module, checkout this link.

每当您致电 $ translate.use（localeId）它将在内部进行ajax调用，当此调用解析时，它将发出 $ translateChangeSuccess 事件，然后你发出请求，加载数据并更新 $ scope.projectJSON 。

唯一的事情就是第一次触发这个事件，当你刷新浏览器时，当 $ translate.use 未被调用时。

Whenever you call $translate.use(localeId) it will make ajax call internally and when this call is resolved it will emit $translateChangeSuccess event, then you make your request, load data and update $scope.projectJSON.
The only thing is to trigger this event first time, when you refresh browser, when $translate.use is not called.

为此您只需拨打 $ translate.use 一次页面重新加载。

For this you can just call $translate.use one time on page reload.

将以下代码放在 $ scope.language.init 函数的末尾。

Put the following code at the end of your $scope.language.init function.

$translate.use(proposedLanguage || preferredLanguage);

这可以解决您的问题。

这篇关于angularjs ng-重复来自不同i18n文件的下拉值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！