javascript - Angular 引用数组引用

我正在与angular中的自定义指令一起使用angular-translate。
我创建了这个“菜单”指令，该指令显示带有文本的按钮，并在这样的数组中接受这些按钮字符串（以便我可以在指令中循环通过它们）：

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

但是我无法让它为上帝的爱发挥作用！无论我选择哪种报价顺序或变体，我都会得到：


  错误：[$ parse：syntax]语法错误：令牌“ TRANSLATEVALUE”为
  意外，期望[]在表达式的第6列
  [['{{'TRANSLATEVALUE'| translate}}'，'项目'，'关于'，'工具'，'博客'，
  [联系方式]]从
  [TRANSLATEVALUE'| translate}}'，“项目”，“关于”，“工具”，“博客”，
  '联系']]。


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

我猜问题出在报价单中，但我无法正确解决。我真的很想使用一个简单易读的解决方案，例如在我提供的不成功示例中。

并且即使这很重要，我也在我的指令中这样做以接受数组：

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

最佳答案

将$translate注入您的directive内并转换数组。

.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"…}

关于javascript - Angular 引用数组引用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34864592/