How to put some html markdowns in an angular-translate variable?

Question

There is my problem: I have to put a long sentence with bold and underlined parts in a variable. First of all, I cut it in several variables and it worked very well, but I thought about the translator who will work on it and I don't want him to make mistakes.

I have this in a coffeescript file:

'HELLO_WORLD': 'Hello World, <b>what a wonderful day</b>'

And this in a jade file:

{{ 'HELLO_WORLD' | translate }}

I tried to use $translateProvider.useSanitizeValueStrategy(), different functions, but markdowns always appear on my interface. Do you have an idea about how to do it?

Thanks!

Answer 1

No, it's not possible to do that and even if it were it wouldn't be advisable to do so. Imagine if you needed to add a class to that element in the future, or manipulate it in some other way. You would eventually find yourself mixing DOM files with translation ones when maintaining your application.

My suggestion:

'HELLO_WORLD_PART1': 'Hello World,',
'HELLO_WORLD_PART2': 'what a wonderful day'

Then:

{{ 'HELLO_WORLD_PART1' | translate }} <b>{{ 'HELLO_WORLD_PART2' | translate }} </b>