javascript - 数组引用中的 Angular 翻译

Question

我正在使用 Angular-Translate 和 Angular 中的自定义指令。
我制作了这个“菜单”指令，它显示带有文本的按钮并接受像这样的数组中的这些按钮字符串(以便我可以在指令内循环它们):

<menu logo="Images/logo.svg" 
links="['Portfolio','Projects','About','Tools', 'Blog', 'Contact']"
urls="['/','projects','about','tools', 'blog', 'contact']"></menu>

现在我正在尝试使用 Angular 翻译使按钮显示本地化值。到目前为止，我已经显示了这样的本地化文本:

<span>{{'TRANSLATEVALUE'|translate}}</span>

或者这个:

<span translate="TRANSLATEVALUE"></span>

还有其他类似的方式，它们都是独立工作的。
现在我想像以前一样将翻译后的值发送到数组中的指令:

<menu logo="Images/logo.svg" 
links="['{{'TRANSLATEVALUE'|translate}}','Projects','About','Tools', 'Blog', 'Contact']"
urls="['/','projects','about','tools', 'blog', 'contact']"></menu>

但我无法让它发挥作用!无论我选择哪种报价单或变体，我总是得到:

Error: [$parse:syntax] Syntax Error: Token 'TRANSLATEVALUE' is unexpected, expecting []] at column 6 of the expression [['{{'TRANSLATEVALUE'|translate}}','Projects','About','Tools', 'Blog', 'Contact']] starting at [TRANSLATEVALUE'|translate}}','Projects','About','Tools', 'Blog', 'Contact']].

或者这个语法错误的一些变体。

我猜问题出在引文中，但我就是无法理解。我真的很想使用一个简单的可读解决方案，例如我提供的不成功示例。

如果重要的话，我会在指令中执行此操作来接受数组:

...
restrict: 'E',
scope: {
  logo:'@',
  links:'=',
  urls:'='
},
...

Answer 1

在您的指令中注入(inject)$translate并翻译您的数组。

.directive('menu', ['$translate', function ($translate) {
    return {
        restrict: 'E',
        scope: {
            logo: '@',
            links: '=',
            urls: '='
        },
        link: function (scope, element, attr) {
            var value = $translate.instant(scope.links[0]);
        }
    }
}]);

从代码中删除。

  {{'TRANSLATEVALUE'|translate}}

您可以通过将 scope.links 传递给 $translate 函数来立即翻译所有链接。

$translate.instant(scope.links)

返回一个对象，如下所示。

Object {Projects: "Projects", About: "About", Tools: "Tools", Blog: "Blog"…}