How to handle strings containing HTML using Angular-Translate?

Is there a way to tell angular and angular-translate to handle strings which contains HTML content.

I have add_card-title = "To make ordering even quicker, <span class="nowrap">add a card now</span>" as my Lang string. When i use it in my template by writing <p>{{'add_card-title' | translate}}</p> I get string as it is.

Output: To make ordering even quicker, <span class="nowrap">add a card now</span> expected output: To make ordering even quicker, add a card now

I know i can use ng-html-bind-unsafe but it is not helping.

Not working:

<p ng-html-bind-unsafe="{{'add_card-title' | translate}}"></p>

Is there any way to achieve it?

Here is my plunker: http://plnkr.co/edit/nTmMFm9B94BmbTgo2h8H?p=preview

For reference you can see this issue: https://github.com/PascalPrecht/angular-translate/issues/173

note: i do not want to invlove controller to handle it.

Solution 1:

You can do this out of box with angular-translate 2.0 these days.

<p translate="{{ 'PASSED_AS_INTERPOLATION' }}"></p> 

works wonders for me.

Solution 2:

You have to use the ng-bind-html directive without curly braces ({{ }})

To know the configuration needed in order to use that directive (ngBindHtml), follow this link: https://docs.angularjs.org/api/ng/directive/ngBindHtml

After ngSanitize is included, the following code should work:

<p ng-bind-html="'add_card-title' | translate"></p>

Solution 3:

This works for me... the HTML is interpreted for nice styling (e.g. bold, italics, etc.)

<p translate="translationId"></p>

However, I also needed to ensure that I wasn't using escape strategy in the provider setup. That messed me up for a while.

• Works: $translateProvider.useSanitizeValueStrategy( 'sanitize' );
• Nope: $translateProvider.useSanitizeValueStrategy( 'escape' );

https://angular-translate.github.io/docs/#/guide/19_security

Using: angular-translate v2.13.1

Solution 4:

You can use <p [innerHTML]="'add_card-title' | translate"></p>