2

我昨天刚开始使用 angularjs，所以假设我对此一无所知。我尝试做的第一件事是将我的 UI 的所有标签放入一个文件中（这样我们就可以将它们换成 i18n）。

据我了解，这可以通过导入 js 文件，然后在 html 中添加包含标签的函数作为控制器来实现，如下所示：

<html ng-app>
...
<script src="js/i18n/en-US.js"></script> <!-- function inside this named lang -->
...
<body>
... <!-- some html -->
<div ng-controller="lang">
<label class="span5">{{nameOfLabelVar}}</label>
</div>
</body>
</html>

这一切都有效。但是现在谈到代码组织时，我有点迷茫。在那个 div 里面有一些选择菜单，我也想在上面使用 angular。

我希望标签的 js 代码位于一个文件中，而页面的视图逻辑位于另一个 js 文件中（name-of-that-page-view-model.js）。我不确定如何做到这一点。据我所知，您不能嵌套 ng-controller 标签，也不能将它们添加到它所要使用的特定标签中。

如果能够有一个全局控制器来导入页面的所有其他 js 文件，那就太好了。

我敢打赌，这已被纳入框架，但我错过了它，因此感谢您朝正确的方向轻推。

谢谢。

4

4 回答 4

5

经过大量研究，这是我的 2 美分：我个人的结论是angular-translate库对我来说是迄今为止最好的。有很多不错的解决方案，比如那个库，它合并了关于该主题的 2 个教程。但是 angular-translate 有我需要的所有要求：

  • 通过凉亭安装
  • JSON 文件支持我喜欢的结构
  • 易于初始化
  • 检查浏览器文化
  • 改变运行时间的文化
  • 很棒的翻译加载器
  • 很棒的文档
  • 最受欢迎，最大的社区，也是唯一一个仍然经常维护的社区

希望能帮助到你...

于 2013-08-30T14:26:12.440 回答
2

如需更灵活的基础，请查看http://angular-translate.github.io/

于 2013-07-29T10:14:58.140 回答
1

这是我做 i18n 工作的方式，它似乎工作得很好！它基于一组在运行时初始化的本地化资源文件。

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

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

    // Fetch Resource File
    function init() {
        return $http.get('resources/locales/' + User.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();
}]);

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

.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，但具有不同的翻译文本。

于 2014-11-14T23:20:29.037 回答
0

我认为这个链接：

（布鲁诺在角度 js 中的 i18n 方法）

很好地回答了你的问题。他的方法在概念上与您想要做的类似，但我认为他的实现涉及过滤器，允许您使用类似的结构

<span class="author">{{ 'WRITTENBY' | i18n }} Bruno</span>

而不是您建议的更简单的标签。阅读他的文章，看看它是否回答了您的问题，但我认为可以。

于 2013-07-23T02:59:53.197 回答