angular-gettext

angular-gettext copied to clipboard

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.

Related to #226.

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

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

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

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.

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

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

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.

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

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

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.

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