rubenv / angular-gettext

Gettext support for Angular.js
http://angular-gettext.rocketeer.be/
MIT License
650 stars 154 forks source link

Yet another attribute translation question #246

Open anilanar opened 8 years ago

anilanar commented 8 years ago

I looked through issues here and I couldn't find one that mentions this problem. Currently it's impossible to translate the following without translating strings in JS:

<input placeholder="Numbers between {{start}} and {{end}}">

Feature request:

Support one of the following syntaxes:

<input translate-placeholder placeholder="Numbers between {{start}} and {{end}}">

or

<input translate-attr="placeholder" placeholder="Numbers between {{start}} and {{end}}">

With this approach, translate-plural, translate-n, translate-context and any other directive related mechanisms can be used for attributes.

anilanar commented 8 years ago

Related to #226.

circlingthesun commented 8 years ago

<input placeholder="'Numbers between {{start}} and {{end}}'|translate"> See https://angular-gettext.rocketeer.be/dev-guide/annotate/

anilanar commented 8 years ago

There's no such example in docs. And your example obviously won't work.

circlingthesun commented 8 years ago

Right. I see your issue. You could pipe it to another filter to do interpolation. Something like:

app.filter('substitute', function($interpolate) {
return function(text, context) {
    var interpolateFn = $interpolate(text);
    return interpolateFn(context);
}
});

<input placeholder="'Numbers between {{start}} and {{end}}'|translate|substitute:{start: '1', end: '30'}">

anilanar commented 8 years ago

First of all, it needs to be

<input placeholder="{{'Numbers between {{start}} and {{end}}' | translate}}"> 

and this won't work because Angular won't like nested interpolatable stuff, i.e. nested curly brace expressions.

circlingthesun commented 8 years ago

How's this for a workaround: http://plnkr.co/edit/5vdiC8Nydm351BtPzap9?p=preview

anilanar commented 8 years ago

Yes, that's indeed a workaround. Don't you think such a workaround should make it into angular-gettext?

anilanar commented 8 years ago

So seeing the source code for grunt tools, it is possible to add placeholder to attributes and then one can create a custom directive to translate it.

But that doesn't solve the problem for the following example:

<a href="" tooltip="Click to go to page {{pageNumber}}" translate>Next</a>

Because for the grunt tool, tooltip and translate are the same. When extracting, content of an html element has priority over attribute value. So for this example, only "Next" is extracted. I believe this library needs to be adopted by a bigger organisation to speed up development.

gaffney commented 8 years ago

:+1: This is a much needed feature IMO...

rebers commented 8 years ago

Much needed feature indeed. Just moving a project from angular-translate to angular-gettext and did not have those issues there. You could simple do:

{{ 'This is {{var1}} favourite {{var2}}.' | translate : { var1: 'my', var2: 'place' } }}

Which would translate into:

This is my favourite place

I understand that due to the minimalistic footprint you do not want to add this feature, but the substitute filter is a ridiculous (though: working!) workaround, that does not feel like it should be used like that. Particularly when translators are presented with using [[]] some times, and `{{}}`` other times.

Would be great if it would find its way into the library.

Finally, @anilanar, I see you live in Germany, so: "Der Ton macht die Musik" (= It's not what you say, but how you say it.).

intellix commented 8 years ago

Stumbled upon this today: https://angular-gettext.rocketeer.be/dev-guide/custom-annotations/ You can just create a new directive called "placeholder" which will run all placeholders through translation automatically.

alfaproject commented 8 years ago

@intellix that example doesn't support interpolation. You can duplicate everything in the translate directive logic, but I'm guessing that @anilanar doesn't want to do that.