Angular 翻译成数组引用

Question

我在 angular.
中使用 angular-translate 和自定义指令我已经制作了这个 "Menu" 指令，它显示带有文本的按钮并在这样的数组中接受这些按钮字符串（这样我就可以在指令中循环遍历它们）：

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

现在我正在尝试使用 angular-translate 让按钮显示本地化的值。到目前为止，我一直在显示这样的本地化文本：

<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']].

或此语法错误的某些变体。

我猜问题出在引文中，但我就是没弄对。我真的很想使用一个简单易读的解决方案，就像我提供的 unsuccessful 示例中那样。

如果重要的话，我在我的指令中这样做以接受数组：

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

Answer 1

你试过这样吗？ {{ ['TRANSLATEVALUE', 'TRANSLATEVALUE2',...]|翻译}}' 我知道 $translate 可以接受一个数组，所以也许过滤器也可以。

使用指令模板中的 translate 指令翻译指令中的值的另一种方法？这比一堆'|更具可读性翻译'，即使你能做到这一点。

如果您正在构建 il8n 应用程序（即不是像 angular-translate,... 这样的独立组件库），那么将指令绑定到 $translate 并没有错。

否则你可以在控制器中调用翻译。

=========================================== =====

顺便说一下，我认为在视图中硬编码您的值不是一个好主意。

最好在服务中有一个对象数组来定义以下形式的对象：

[{link : 'LABEL_PROJECTS', url:'/'},{...}].

如果您真的有雄心壮志，可以使用提供程序，这样如果您想添加菜单，就不需要修改现有代码。

但这是针对个人应用程序的，不必为此烦恼。它更适用于更大的项目。

=========================================== ==

Answer 2

在你的 directive 中注入 $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)

Returns一个对象如下。

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

Angular 翻译成数组引用

Angular translate in array quotation

javascript

arrays

angularjs

angularjs-directive

angular-translate