CODEWITHSUNDEEP
javascriptarraysangularjsangularjs-directiveangular-translate
Biserka Zinreich
Biserka Zinreich

Reputation: 209

Angular translate in array quotation

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

Upvotes: 1

Views: 1490

Answers (2)

Turdaliev Nursultan
Turdaliev Nursultan

Reputation: 2576

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

Upvotes: 0

Walfrat
Walfrat

Reputation: 5353

Did you try like this ? {{ ['TRANSLATEVALUE', 'TRANSLATEVALUE2',...]|translate}}' I know that $translate can take an array, so maybe the filter can too.

Anoter way of translating the values inside the directive using the translate directive in your directive's template ? 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,...).

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.

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

Upvotes: 0

Related Questions