angularjsangular-translateng-bind-html

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

Solution

  • 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