Display style tag in angular js while translation

Question

This is my controller file wherein

$scope.htmlCompanyFromScope = '<span style=color:red>Micro</span>';
$scope.htmlTagFromScope = "MicroTag";

My *.resx file contains

 TranslationValue = "{{htmlCompany}} tag is {{htmlTag}}"

And in my HTML I define the following:

 <span translate="TranslationValue " translate-values="{htmlCompany: htmlCompanyFromScope , htmlTag: htmlTagFromScope}"></span>

But in the end, the style is not honored. Displays something like

Micro tag is MicroTag

any pointers ?

Answer 1

I assume you are using sanitize strategy for escaping like:

$translateProvider.useSanitizeValueStrategy('sanitize');

It uses $sanitize service, so style attributes will get stripped by this service (and to overwrite this you'll need to change the source code of angular-sanitize.js, but I don't recommend doing this). As a workaround here - you need to use class attributes (since class attributes are not stripped with $sanitize) like class="red" and set proper css styles like .red { color:red; }.

Example here.

Answer 2

Use

<span style="color:red">

not

<span style=color:red>