Question

我正在尝试使用AngularJS来添加对语言的支持：

window.language = english;
$scope.title.english = "English thing";
$scope.title.spanish = "Espanol Si";

<h1 ng-bind="title.{{window.language}}"></h1>

任何人都知道如何在模板中做这样的事情吗？

Answer 1

有多种方法可以实现这一目标：

1 - html中的逻辑：

JS

$scope.window = window;
$scope.title = {
    english: 'English thing',
    spanish: 'Espanol Si'
};

HTML

<h1 ng-bind="title[window.language]"></h1>

或

<h1>{{title[window.language]}}</h1>

但是这会导致很多代码重复，而且你最终也没有任何文本可用于缺少翻译（也没有错误）

2 - 控制器中的逻辑

JS

var title = {
    english: 'English thing',
    spanish: 'Espanol Si'
};

$scope.getTitle = function() {
    // maybe add code for error handling here
    return title[window.language];
};

HTML

<h1 ng-bind="getTitle()"></h1>

或

<h1>{{getTitle()}}</h1>

这仍然会给你留下很多代码重复，但至少你可以执行一些验证逻辑，并且可能会在缺少验证时抛出错误（或提供某种回退机制）。此外，因为它现在是javascript代码，它也很容易测试。

3 - 创建自定义过滤器

JS - 过滤器

angular
    .module('myI18n', [])
    .filter('my18n', function() {
        return function(data) {
            // add code for error handling etc. here
            return data[window.language];
        };
    });

JS - 控制器

$scope.title = {
    english: 'English thing',
    spanish: 'Espanol Si'
};

HTML

<h1 ng-bind="title | myI18n"></h1>

或

<h1>{{title | myI18n}}</h1>

这可能是你能得到的最干净的解决方案，而且它也非常富有表现力，因为你直接在你的html中说明你的代码会发生什么，而不依赖于实现细节（也许你想把window.language更改为window .i18n.language稍后或类似的东西）。它也很容易再次测试。

所以，如果你真的想要自己实现类似的东西，我会推荐第三种选择，但你必须要知道你只能使用同步翻译。对于更复杂的方法，我建议使用即用型i18n库，如angular-translate

AngularJS ng-bind到动态变量名称

1 个答案: