javascript - AngularJS ng-绑定(bind)到动态变量名称

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 - Controller 中的逻辑

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 - Controller

$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 稍后或类似的东西)。 它也很容易再次测试。

所以如果你真的想自己实现这样的东西，我会推荐第三个选项，但你必须意识到你仅限于同步翻译。对于更复杂的方法，我真的建议使用像 angular-translate 这样的即用型 i18n 库。