Translate attributes with translate directive

[red-0ne]

Actually, the only way to translate elements attributes is through the translate filter. Is there a particular reason to not having a directive for that?

<any translate-attr-my-attr="'TRANSLATION_ID'"></any> could be a great feature.

[0x-r4bbit]

Indeed! @red-0ne wanna start implementing it?

[red-0ne]

Of course. I just wanted to know if it is the way to go.

[0x-r4bbit]

@red-0ne I think the idea is great. I'm also pretty okay with

<ANY translate-attr-{attr}=""></ANY>

syntax.
Here are some requirements:
it should...

• ... be able to understand translation ids as strings (e.g. "TRANSLATION_ID")
• ... be able to understand translatino ids as interpolation (e.g. {{'TRANSLATION_ID'}})
• ... be unit tested

That's all I have. Any other ideas?

[red-0ne]

Pay attention to attributes that are manipulated by other directives? (already defined attributes)

[0x-r4bbit]

@red-0ne could you elaborate on that?

[red-0ne]

how to deal with ... translate-attr-value="" value="val"..., ...translate-attr-value="" value="{{var}}..., ...trnaslate-attr-value="" directive-that-manipulates-value-attribute... ?

[red-0ne]

what about ...translate-attr="value" value="ID" ...? That way there would be no conflict

[knalli]

If the Attributes will be either observed or binded in the scope, any change to the attribute should be available like others. Just like translate and its translation id.

[0x-r4bbit]

@red-0ne if there are already attributes with a value, they would get over written. Since it doesn't make real sense to have both on an element. When you know there's an element with a value attribute, you should either use that or translate-attr-value which results in value once processed.

I think the most cases would be covered with that approach. Maybe we should just go for it now and ignore a possible directive-could-change-value-attribute scenario

[red-0ne]

You are right, caring about other overrides is pointless

[0x-r4bbit]

@red-0ne oh no, please don't get me wrong. I just think we can deal with these issues once they occur. Because currently it's hard to say how to handle such cases. We have to play with directive priorities I think. However, if you have an idea to tackle it, don't hesitate and tell me :)

I'm happy and open for great ideas.

[red-0ne]

@PascalPrecht i am ok with you, It is wiser to deal with the issue once it arises.

[red-0ne]

For other directives that could change the value, we can observe the attribute for changes but these directives should be angular-translate aware.

[red-0ne]

Apparently there is no way to have a translate-attr-* directive without hacking angularjs $compile. So either we go with the translate-attr="value" value="..." way or translate translate-attr-value. For the second option, we have to code the behavior into the translate directive, like what is done with translate-value-*

[0x-r4bbit]

Could you elaborate on why we couldn't go the other way without hacking $compile? (Then we should just go with translate-attr and translate-attr-value)

[red-0ne]

There is no way to register a directive that is called for a "wildcard/regex" attribute. The only way to have translate-attr-x and translate-attr-y directive is to register each of them. Of course if you have an idea on how we can do it without registering each directive variant then I would be glad to know it.

[0x-r4bbit]

@red-0ne Ah getting your point now. So, we actually don't need to introduce a new directive. Attributes like translate-value-* aren't directives either. The translate directive just looks if there's an attribute called translate-value-*.

So first it checks if the attribute exists at all: https://github.com/angular-translate/angular-translate/blob/master/src/directive/translate.js#L92

And then it goes ahead evaluates the values out of them: https://github.com/angular-translate/angular-translate/blob/master/src/directive/translate.js#L123-L134

So in the end, basically what you said. But I don't think we have to introduce translate-attr-* and value, actually we have all information in translate-attr-*.

So if we have something like <ANY translate-attr-title="{{foo}}"> then it'll result in <ANY title="valueOfFoo">.

I think that's the way to go. Thank you very much for you input already!

[red-0ne]

Perfect. I'll make a pull request ASAP

[0x-r4bbit]

@red-0ne great! Looking forward to it!

[tspaeth]

Pinging @red-0ne 😃

[ScottONeal]

Maybe I am missing something, but I didn't see an update on this ticket.

I haven't come up with a solution that I liked using a syntax of:translate-attr-*="translationId"

I just created a quick plunkr using a object literal convention like:

<ANY translate-attr="{ 'title': 'translationId' }">

http://plnkr.co/edit/1NfcEO?p=preview

I can draft a PR if this is a direction you want to go.

[knalli]

landed as 06818ab (merge of 1d06d2a + 508fd32)

[sashasochka]

How do I translate an attribute only but not tag contents? See what I'm saying:

      <span
            translate translate-attr-title="CLONE_THIS_WIDGET">
        <i class="glyphicon fi-page-copy"></i>
      </span>

This replaces the inner content of span tag entirely , probably trying to translate it.

[armyofda12mnkeys]

Just curious, reading how attributes are added here...
Can you set default values for the translation attributes via something like a 'translate-attr-default-placeholder' attribute like so:

<input type="text" ng-model="user.refine.checkbox.list.text" translate translate-attr-placeholder="refine.list.type" translate-attr-default-placeholder="Type here to refine the list" />