Marcos Lima Marcos Lima - 1 year ago 86
AngularJS Question

ngTranslate with pluralization and HTML

I have a template with ngTranslate pluralization:

en-US "{count, plural, one{1 accepted} other{# accepted}}"
pt-BR "{count, plural, one{1 aceito} other{# aceitos}}"

But I want to put the number between a

en-US "{count, plural, one{<span>1</span> accepted} other{<span>#</span> accepted}}"
pt-BR "{count, plural, one{<span>1</span> aceito} other{<span>#</span> aceitos}}"

This way, if I use the
attribute directive:

<span translate="LBL_ACCEPTED" translate-values="model.i18nValues" translate-interpolation="messageformat"></span>

the HTML is encripted and I can see the HTML tag in the final result. So I use the

<span ng-bind-html="'LBL_ACCEPTED' | translate:model.i18nValues:'messageformat' | trustHtml"></span>

Same result. The HTML is displayed to the user.

Is there any way to decrypt this HTML tags?


The problem isn't specific to ngMessageFormat use. If I have a translation like
"<b>{{count}}</b> accepted"
, the tags are escaped. I tried adding the
directive, but nothing seems to work.

Answer Source

Found the problem.

In the module config, I was setting:


Wasted a couple of hours here.