Question

我使用角度平移与角度的自定义指令一起使用我已经制作了这个＆＃34;菜单＆＃34;指令显示带有文本的按钮，并接受这样的数组中的那些按钮字符串（这样我就可以在指令中循环它们）：

<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]语法错误：令牌＆＃39; TRANSLATEVALUE＆＃39;是意外，期待表达式第6列的[]] [＆＃39; {{＆＃39; TRANSLATEVALUE＆＃39; |翻译}}＆＃39;＆＃39;项目＆＃39;＆＃39;关于＆＃39;＆＃39;工具＆＃39 ;，＆＃39; Blog＆＃39;，＆＃39;联系＆＃39;]]从 [TRANSLATEVALUE＆＃39; |翻译}}＆＃39;，＆＃39;项目＆＃39;，＆＃39;关于＆＃39;，＆＃39;工具＆＃39;博客＆＃39;，＆＃39;联系＆＃39;。]]

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

我猜这个问题在引文中，但我无法做到正确。我真的想使用一个简单的可读解决方案，就像我提供的不成功的示例一样。

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

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

Answer 1

你尝试过这样的吗？ {{['TRANSLATEVALUE'，'TRANSLATEVALUE2'，...] |翻译}}' 我知道$ translate可以采用数组，所以也许过滤器也可以。

使用指令模板中的translate指令翻译指令内部值的Anoter方式？这比一堆'|更具可读性翻译'即使你可以使这项工作。

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

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

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

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

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

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

如果你真的雄心勃勃，你可以使用提供商，所以如果你想添加菜单，你不需要修改现有的代码。

但是对于个人应用来说并不是真的很烦。对于更大的项目来说更是如此。

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

Answer 2

在$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"…}

数组引用中的Angular转换

2 个答案: