使用AngularJS的ng-repeat指令从不同的i18n文件中重复下拉选项的值。

11 浏览
0 Comments

使用AngularJS的ng-repeat指令从不同的i18n文件中重复下拉选项的值。

下面是一个示例的英文json i18n语言文件：\n{\n \"project\": {\n \"SPONSORINFO\": {\n \"MAIN\" : \"选择赞助商名称\",\n \"SPONSORLIST\": [\n {\"spons\" :\"赞助商名称1\" },\n {\"spons\" :\"赞助商名称2\" }\n ]\n }\n }\n}\n\n这是我的HTML视图：\n

\n在

问题：

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

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

\n
问题是，切换语言后，下拉菜单不会根据选择的语言进行更改，除非我刷新或更改视图然后返回。如何解决这个问题，使其像

附录：

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

app.config(['$translateProvider',
function ($translateProvider) {
    // 前缀和后缀信息是指定模式所需的
    // 您可以使用此模式简单地使用静态文件加载器：
    $translateProvider.useStaticFilesLoader({
        prefix: 'assets/i18n/',
        suffix: '.json'
    });
    // 由于现在注册了多个翻译表，angular-translate需要知道使用哪一个。
    // 这就是preferredLanguage(langKey)的作用。
    $translateProvider.preferredLanguage('en');
    // 将语言存储在本地存储中
    $translateProvider.useLocalStorage();
}]);

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

app.controller('AppCtrl', ['$rootScope', '$scope', '$state', '$translate', 
function ($rootScope, $scope, $state, $translate) {
    $scope.language = {
        // 处理语言下拉菜单
        listIsOpen: false,
        // 可用语言列表
        available: {
            'en': '英语',
            //'it_IT': '意大利语',
            'de_DE': '德语'
        },
        // 始终显示当前的UI语言
        init: function () {
            var proposedLanguage = $translate.proposedLanguage() || $translate.use();
            var preferredLanguage = $translate.preferredLanguage();
            // 我们知道我们已经在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();

0

3 答案

0 Comments

问题的出现原因是因为使用了异步函数，导致AngularJS无法立即识别到变化。解决方法是在下载文件后使用$scope.$apply()使AngularJS重新扫描并应用更改。官方建议使用它们的加载器而不是手动加载。使用staticFilesLoader时，需要安装angular-translate-loader-static-files扩展。然后在语言更改函数中使用$translateProvider.preferredLanguage(lang);，这应该能解决问题。如果需要，可以在$scope.$apply()之前添加if语句，以避免在进行摘要时记录错误。建议使用then和catch替代success和error。最后，尝试将更新应用到$translate。如果问题仍然存在，可以尝试添加$translate.use(lang);。

0
0 Comments

问题的原因是在使用ng-repeat从不同的i18n文件中重复下拉框的值时遇到了问题。解决方法是使用promise模式，并且检查响应中的数据是否正确。

具体解决方法如下：

首先，使用promise模式的$http.get方法来获取数据：

$http.get(..).then(function(response){..})

然后，检查响应中的数据是否正确：

$http.get('assets/i18n/'+lang+'.json').then(function(response) {
    //检查响应中的数据
    //console.log(response)
    $scope.projectJSON = response;
});

接着，检查响应中的数据是否正确，可能需要使用$scope.projectJSON = response.data;来获取正确的数据：

$scope.projectJSON = response.data;

最后，检查.then函数中获取的数据是否正确。

0
0 Comments

问题的原因是从不同的i18n文件中重复使用angularjs ng-repeat下拉菜单的值。原因是在代码中使用了$translate服务加载翻译JSON文件，并且无法直接访问加载的内容，但是需要从该JSON文件中获取数据进行迭代。因此，需要自己发起请求来获取这个数组。解决方法是监听$translate服务在$rootScope上触发的$translateChangeSuccess事件，并在该处理程序中进行ajax调用。以下是解决方法的代码示例：

$rootScope.$on('$translateChangeSuccess', function () {
  // 获取当前语言
  var lang = $translate.use();
  $http.get('assets/i18n/'+lang+'.json').success(function(data) {
    $scope.projectJSON = data;
  });
});

通过调用$translate.use(localeId)来触发$translateChangeSuccess事件，这样就可以更新$scope.projectJSON的数据。为了在页面刷新时触发这个事件，只需要在页面加载时调用$translate.use一次即可。将以下代码放在$scope.language.init函数的末尾：

$translate.use(proposedLanguage || preferredLanguage);

这样就可以解决问题。

0