即时交换 AngularJS i18n 文件答案

【问题标题】：Swap AngularJS i18n files on the fly即时交换 AngularJS i18n 文件
【发布时间】：2014-02-23 18:10:25
【问题描述】：

是否可以在运行时交换 Angular 的语言环境文件（例如 angular-locale_en-us.js）而不刷新页面？

谢谢。

【问题讨论】：

【解决方案1】：

这就是我的 i18n 工作方式，它似乎工作得很好！它基于一组在运行时初始化的本地化资源文件。您会注意到 I18n.init 函数采用语言环境，因此如果我愿意，我可以随时更改文件。

I18n 模块保存字符串 id 映射和参数插入

.factory('I18n', ['$http', 'User', function($http, User) {
    // Resource File
    var LANG_FILE;

    // Fetch Resource File
    function init(locale) {
        return $http.get('resources/locales/' + locale + '.json')
            .then(function(response) {
                LANG_FILE = response.data;
            });
    }

    function lang(stringId, params) {
        var string = LANG_FILE[stringId] || stringId;

        if (params && params.length) {
            for (var i = 0; i < params.length; i++) {
                string = string.replace('%' + (i + 1), params[i]);
            }
        }

        return string;
    }

    return {
        init: init,
        lang: lang
    };

}]);

这可以使用 .run 块进行初始化

.run(['I18n', function(I18n) {
    I18n.init(navigator.language);
}]);

并在任何地方使用来翻译这样的字符串

.controller(['$scope', 'I18n', function($scope, I18n) {
    $scope.title = I18n.lang(some_string_id);
}]);

自定义 i18n 指令来处理一次性翻译

.directive('i18n', ['I18n', function(I18n) {
    return {
        restrict: 'A',
        scope: {},
        link: function(scope, $el, attrs) {
            $el[0].innerHTML = I18n.lang(attrs.i18n);
        }
    };
}]);

可以这样使用。

<div i18n="some_string_id"></div>

自定义 PLUALIZE 指令，匹配资源文件中的字符串 ID，并将计数作为参数。

.directive('pluralize', ['I18n', function(I18n) {
    return {
        restrict: 'A',
        scope: {
            count: '='
        },
        link: function($scope, $el, attrs) {
            var when  = JSON.parse(attrs.when)
              , param = [$scope.count];
            if (when[$scope.count]) {
                $el[0].innerHTML = I18n.lang(when[$scope.count], param);
            } else {
                $el[0].innerHTML = I18n.lang(when['other'], param);
            }
        }
    };
}]);

并且可以这样使用。

<div pluralize count="{{obj.count}}" when="{1:'single_item','other': 'multiple_item'}"></div>

字符串资源文件将位于 resources/locales/en-US.json，看起来像这样。

{
    some_string_id: 'This is in English',
    single_item: '%1 item',
    multiple_item: '%1 items'
}

其他语言环境将具有相同的字符串 ID，但翻译文本不同。

【讨论】：