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 ?

Stanislav Kvitash · Accepted Answer · 2017-09-06 11:37:53Z

2

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.

answered Sep 6, 2017 at 11:37

Stanislav Kvitash

4,63220 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

now he who must not be named. Over a year ago

Exactly.. +1 for figuring out that the sanitizeValueStrategy was 'sanitize'. Thanks. introduced class and changed css to include that style.

Jeremy Thille · Accepted Answer · 2017-09-06 11:19:01Z

1

Use

<span style="color:red">

not

<span style=color:red>

answered Sep 6, 2017 at 11:19

Jeremy Thille

26.4k12 gold badges47 silver badges64 bronze badges

Collectives™ on Stack Overflow

Display style tag in angular js while translation

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related