CODEWITHSUNDEEP
angularjsangular-translateng-bind-html
Valentin Coudert
Valentin Coudert

Reputation: 1919

ng-bind-html with angular-translate renders text instead of HTML tag

I'm back on an old AngularJS project (1.7.2) with angular-translate and I'm struggling with ng-bind-html.

In my HTML I wrote this

<span ng-bind-html="'LEFT_PANEL.VISITED_AFTER' | translate"></span>

The result I'm expecting is

<span>Visited <strong>after</strong> this date. </span>

What I have in my translation file is:

"VISITED_AFTER": "Visited <strong>after</strong> this date"

What I actually get is:

<span ng-bind-html="'LEFT_PANEL.VISITED_BEFORE' | translate" class="ng-binding ng-scope">
Visited &lt;strong&gt;before&lt;/strong&gt; this date
</span>

What am I doing wrong ?

(yes I have ngSanitize in my modules)

Thanks

Upvotes: 0

Views: 562

Answers (2)

MrWook
MrWook

Reputation: 348

NgTranslate is using it's own Sanitizer (Docs)

To change the sanitize strategy globally use $translateProvider.useSanitizeValueStrategy("STRATEGY"); If you only want to have a different strategy for this element use the attribute translate-sanitize-strategy

Upvotes: 1

Grenther
Grenther

Reputation: 476

Possible duplicate of this.

Seems to have to do with HTML decoding. Add this function:

function decodeHtml(html) {
  var txt = document.createElement("textarea");
  txt.innerHTML = html;
  return txt.value;
}

And surround what you're printing with: decodeHtml(...)

Actually just look at this plunkr

Upvotes: 0

Related Questions