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-控制器中的逻辑

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。语言或类似的语言）。也很容易再次测试。

因此，如果您真的想自己实现类似的功能，我建议您使用第3个选项，但是您必须知道，您仅限于同步翻译。对于更复杂的方法，我真的建议使用现成的i18n库，例如angular-translate