AngularJS NG-结合动态变量名称

问题描述：

我试图完成一些类似的添加使用AngularJS语言支持：AngularJS NG-结合动态变量名称

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

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

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

括号表示法：'title [language]'。 **注意：如果您没有在js中使用'$ scope.window = window'，则视窗不可用* – Grundy

您应该为此使用插件。有多个，请查看这个：https://angular-translate.github.io/docs/#/guide如果你坚持手动执行，请告诉我。 – VSO

答

有实现这一目标的途径复式：

1 - 以HTML的逻辑：

$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 - 在控制器逻辑

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应该发生在你的代码是什么直接的状态，而不依赖于实现细节（也许你想改变窗口。语言to window.i18n.language稍后或类似的东西）。也很容易再次测试。

所以，如果你真的想自己去实现这样的事情，我会推荐第三个选项，但是你必须知道你仅限于同步翻译。对于更复杂的方法，我真的会推荐使用一个随时可用的i18n库，如angular-translate

AngularJS NG-结合动态变量名称

相关推荐