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 ?

score 2 · Accepted Answer · answered Sep 06 '17 at 11:37

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.

Exactly.. +1 for figuring out that the sanitizeValueStrategy was 'sanitize'. Thanks. introduced class and changed css to include that style. — now he who must not be named., Sep 06 '17 at 12:06

score 1 · Answer 2 · answered Sep 06 '17 at 11:19

1

Use

<span style="color:red">

not

<span style=color:red>

answered Sep 06 '17 at 11:19

Jeremy Thille

26,047
12
43
63

Display style tag in angular js while translation

2 Answers2