Directive to do I18n translations that dynamically updates according to scope variables

[TsenYing H]

I have coded a directive to translate strings to a given locale and dynamically update according to scope variables.

I would like feedback on whether the approach I've taken has issues, and if it can be done better.

As an example, a string with a variable number would need to respond to pluralization rules, with three cases in English, like:

  You took no samples.

  You took 1 sample.

  You took 5 samples.

I would like a directive that looks like:

  <span gl-translate options='{"count":{{count}}}'>hints.sample.counting</span>

the rendered result, if {{count}} is 0, would look like;

  <span gl-translate="" options="{'count':{{count}}}">You took no samples</span>

Where glTranslate is the name of the directive,

the contents of the directive 'hints.sample.counting' is a key for some translation library,

and the options attribute captures the options to the translation function. Here the options attribute has a binding to the scope variable 'count'

The directive link function would call some translation function, using the key 'hints.sample.counting' and passing the options as well.

I have the directive coded in this plunk: http://plnkr.co/edit/H8xK5q

The translation library used here is: https://github.com/fnando/i18n-js

Which is a library the make Ruby on Rails translations available in Javascript.

Thanks for any feedback,

TsenYing

[Pawel Kozlowski]

How this would work if I would like to translate a value of an attribute, say a placeholder attribute in an input field?

This is a use case for which I haven't seen support in all the translation directives I've seen so far.

Cheers,

Pawel

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en-US.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

--
Question? Send a fiddle (http://jsfiddle.net/pkozlowski_opensource/Q2NpJ/) or a plunk (http://plnkr.co/)
Need help with jsFiddle? Check this: http://pkozlowskios.wordpress.com/2012/08/12/using-jsfiddle-with-angularjs/

Looking for UI widget library for AngularJS? Here you go: http://angular-ui.github.com/