How to pass the results from a rendered directive as variable to angular-translate

Question

I have a (rather complex) directive that can render amounts in a currency. It formats the currency based on the rules of that currency (e.g. if a currency has cents etc.) and formats the number and symbol based on the locale, it adds the sign and classes if an amount is negative and so on and so on.

I'd like to use the outcome of the directive as a variable in a translation.

There is a plunker with a simplified setup here

In short, what I'd want:

Your balance: <strong currency data-amount="-1337" data-symbol="'€'"></strong>
<p translate translate-values="{ currency: '€', amount: 1337, beneficiary: 'carol' }">PAY_TO</p>

With the translation being something like:

var translations = {
  PAY_TO: "You must pay {{ amount }} to {{ beneficiary}}"
};

(in the plunker the key is PAY_TO_PROPER)

The goal is the replace {{ amount }} with a formatted piece of HTML as returned from the directive.

Note that in the plunker, the directive is simplified, in reality it takes a lot of things into consideration, things that I really don't want to add to a template. e.g. fallback symbols based on an ISO_CODE, determining how many fractionals to render, based on the currency (there are currencies with 0, 2, 3, 5, or even 8 digits, to name some; this stuff is complex)

What would a common pattern for this be? Is passing the result from a rendered directive as variable a proper way in Angular, or would that be an ugly hack?

Am I using translations or directives wrong? I can hardly beleive that this is so hard and that I cannot find anyone else looking for how to do this on google or stackoverflow.

Answer 1

There is an angular-translate option, called translate-compile, that you can use to compile values passed into the translation in the context of the current scope (https://angular-translate.github.io/docs/#/guide/05_using-translate-directive#using-translate-directive_post-compiling).

You can use it like this:

<p translate translate-values="{ amount: '<currency data-amount=\'1337\' data-symbol=&quot;\'€\'&quot;></currency>', beneficiary: 'carol' }" translate-compile>PAY_TO_PROPER</p>

See the attached fiddle: http://plnkr.co/edit/IRFzWU2Qfw7zxdBNSl4L