[英]Angular translate in array quotation
I'm using angular-translate along side with custom directives in angular. 我正在使用与angular中的自定义指令一起使用angular-translate。
I've made this "Menu" directive which displays buttons with text and accepts those button strings in an array like this (so that I can loop through them inside the directive): 我创建了这个“菜单”指令,该指令显示带有文本的按钮,并在这样的数组中接受这些按钮字符串(以便我可以在指令内部遍历它们):
<menu logo="Images/logo.svg"
links="['Portfolio','Projects','About','Tools', 'Blog', 'Contact']"
urls="['/','projects','about','tools', 'blog', 'contact']"></menu>
Now I'm trying to make the buttons display localized values using angular-translate. 现在,我正在尝试使按钮使用angular-translate显示局部值。 I've come so far to display localized text like this:
到目前为止,我已经显示了这样的本地化文本:
<span>{{'TRANSLATEVALUE'|translate}}</span>
Or this: 或这个:
<span translate="TRANSLATEVALUE"></span>
And other simmilar ways and they all work by themselves. 和其他类似的方式,它们都可以自己工作。
Now I want to send the translated values to my directive in an array just like before: 现在,我想像以前一样将转换后的值发送到数组中的指令:
<menu logo="Images/logo.svg"
links="['{{'TRANSLATEVALUE'|translate}}','Projects','About','Tools', 'Blog', 'Contact']"
urls="['/','projects','about','tools', 'blog', 'contact']"></menu>
But I can not get it to function for the love of god! 但是我无法让它发挥作用来满足上帝的爱! No matter what kind of quotation order or variant I choose, I always get:
无论我选择哪种报价顺序或变体,我总能得到:
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']].
错误:[$ parse:syntax]语法错误:令牌'TRANSLATEVALUE'意外,期望表达式[['{{'TRANSLATEVALUE'| translate}}}','Projects','About',从[TRANSLATEVALUE'| translate}}','Projects','About','Tools','Blog','Contact']开始的'Tools','Blog','Contact']]。
Or some variant of this syntax error. 或此语法错误的某些变体。
I'm guessing the problem is in the quotation, but I just can't get it right. 我猜问题出在报价单中,但我无法正确解决。 I would really like to use a simple readable solution like in the unsuccessful example I have provided.
我真的很想使用一个简单易读的解决方案,例如在我提供的不成功示例中。
And just if it matters, I'm doing this in my directive to accept the array: 并且即使这很重要,我也在我的指令中这样做以接受数组:
...
restrict: 'E',
scope: {
logo:'@',
links:'=',
urls:'='
},
...
Did you try like this ? 你这样尝试过吗? {{ ['TRANSLATEVALUE', 'TRANSLATEVALUE2',...]|translate}}' I know that $translate can take an array, so maybe the filter can too.
{{['TRANSLATEVALUE','TRANSLATEVALUE2',...] | translate}}'我知道$ translate可以接受数组,所以过滤器也可以。
Anoter way of translating the values inside the directive using the translate directive in your directive's template ? 使用指令模板中的translate指令转换指令内部值的另一种方式? This is far more readable than a bunch of '|
这比一堆'|更具可读性。 translate' even if you can make this work.
翻译”,即使您可以做到这一点。
There is nothing wrong having a directive binded to $translate if you're building a il8n application (ie not a library of independant components like angular-translate,...). 如果您正在构建il8n应用程序,则将指令绑定到$ translate并没有错(即,不是像angular-translate这样的独立组件的库,...)。
Otherwise you can call the translate in the controller. 否则,您可以在控制器中调用翻译。
================================================== ==================================================
By the way i think hardcoding your value in the view isn't a good idea. 顺便说一句,我认为在视图中硬编码您的值不是一个好主意。
It would be better to have an array of objects in a service defining objects of the following form : 最好在服务中具有定义以下形式的对象的对象数组:
[{link : 'LABEL_PROJECTS', url:'/'},{...}].
And if you're really ambitious you can use a provider so if you want to add menu you don't need to modify existing code. 如果您确实有雄心壮志,则可以使用提供程序,因此,如果要添加菜单,则无需修改现有代码。
But it's for a personal application don't really bother with that. 但这是针对个人应用程序的,实际上不必理会。 It's more for bigger projects.
对于较大的项目来说更是如此。
=============================================== ===============================================
Inject $translate
inside your directive
and translate your array. 在
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]);
}
}
}]);
Remove from your code. 从您的代码中删除。
{{'TRANSLATEVALUE'|translate}}
You can have your all links translated instantly by passing scope.links
to $translate
function. 您可以通过将
scope.links
传递给$translate
函数来立即翻译所有链接。
$translate.instant(scope.links)
Returns an object as follows. 返回一个对象,如下所示。
Object {Projects: "Projects", About: "About", Tools: "Tools", Blog: "Blog"…}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.