javascript - angularjs ng-重复来自不同 i18n 文件的下拉值

Question

这是一个英语 json i18n 语言文件示例:

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

这是我的 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" 立即正确显示值"Select the Sponsor Name"当点击语言切换时(不需要刷新)。

问题:

我在我的 View Controller 中使用以下函数根据所选语言加载语言文件并将其传递到 $scope.projectJSON 以便我可以在 ng- 中调用它在我的 html View 中重复:

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

问题是切换语言后，下拉菜单不会更改为所选语言，除非我刷新或更改 View 并返回。我该如何解决这个问题，使其像标签一样工作？

附件:

我的 ma​​in.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();

}]);

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

Answer 1

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

在您的代码中，第一个请求是通过执行此行 var lang = $translate.use(newLang); 发出的，第二个调用是由 $http.get 完成的，但是如果 $http.get 在 $translate.use 中的调用被解析之前解析 它不会翻译下拉列表中的内容，因为 $translate.use< 中的请求 尚未解析，$translate 服务没有这些要翻译的翻译。

你可以做的是在 $rootScope 上监听 $translateChangeSuccess 事件(由 $translate 服务发出)，然后让你的 ajax调用此处理程序。

我已经在您的示例中测试了以下代码，它工作正常。

[更新]

$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;
  });
});

有关 Angular 翻译模块的事件部分的详细说明，请查看 this link .

每当你调用 $translate.use(localeId) 时，它都会在内部进行 ajax 调用，当这个调用被解析时，它会发出 $translateChangeSuccess 事件，然后你就可以进行你的请求、加载数据并更新 $scope.projectJSON。
唯一的事情是第一次触发这个事件，当你刷新浏览器时，当 $translate.use 没有被调用时。

为此，您只需在页面重新加载时调用一次 $translate.use。

[更新]

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

$translate.use(proposedLanguage || preferredLanguage);

这应该可以解决您的问题。