Angular translate in array quotation

Question

I'm using angular-translate along side with custom directives in angular.
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. 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']].

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:'='
},
...

Turdaliev Nursultan Turdaliev Nursultan · Accepted Answer · 2016-01-18T22:23:07

Inject $translate inside your directive and translate your array.

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

$translate.instant(scope.links)

Returns an object as follows.

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

Angular translate in array quotation

2 Answers