Marcos Lima Marcos Lima - 6 months ago 24
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
span
tag:

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
translate
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
ng-bind-html
directive:

<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?

EDIT:

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
translate-compile
directive, but nothing seems to work.

Answer

Found the problem.

In the module config, I was setting:

$translateProvider.useSanitizeValueStrategy('escape');

Wasted a couple of hours here.