Angular-translate is escaping embedded html


#1

Hi,

I am having an issue with angular-translate. It all works, except when there is html in the translation text.

This plunker show he use of $translateProvider.useSanitizeValueStrategy() to allow HTML to render, however it does not work for me in ionic. This is in my app.config()

  var translations = {
    HEADLINE: 'XSS possible!',
    PARAGRAPH: 'Hello {{username}} <strong>love</strong>!',
    FOO: 'Select a term from the list below and click <strong>OK</strong> to display the classes, tests and data associated with the specified term.'
  };
  
  $translateProvider.translations('en', translations);
  $translateProvider.preferredLanguage('en');

  $translateProvider.useSanitizeValueStrategy(null); // Also tried escaped and sanitize

In my ion-content, I have

 {{ 'PARAGRAPH' | translate:"{username:'garys'}"  }}

It’s rendered on screen in my app as:

or as html source

Hello garys &lt;strong&gt;love&lt;/strong&gt;!

I’ve seached with web, ionic forums and angular-translation issues without success.

Any assistance would be greatly appreciated.

Thanks
Gary


#2

Have you tried using $sce.trustAsHtml() ?


#3

Yes, did try that. I did a bit of trial & error and this combo seems to be the most reliable for inline html:

 <p translate="PARAGRAPH" translate-values="{username: 'userx'}"></p> 

With

  $translateProvider.useSanitizeValueStrategy("escaped");

“sanitize” also worked, but not with all html though (ie <span style=‘color:red’>)