Angular Translate HTML标签

Question

I know this has been asked here before but none of the answers seem to work for my case

I bought this theme Angle which is working with Angular 1.4.2 and Angular translate 2.6.0 (even updated to last 2.7.2)

The template by default has the Translate module on it

This is the config file

  $translateProvider.useStaticFilesLoader({
      prefix : 'app/i18n/',
      suffix : '.json'
  });
  $translateProvider.preferredLanguage('es');
  $translateProvider.useLocalStorage();
  $translateProvider.usePostCompiling(true);
   // Enable escaping of HTML
  $translateProvider.useSanitizeValueStrategy('sanitize'); // I added this line based on Docs wasn't before

And the translation files in JSON format

  {
   "page": {
    "PAGES_WELCOME" : "Welcome to <br> MY APPLICATION, HEY THERE IS A BR TAG BEFORE ME"
  },

  "login": {
    .
    .
    .
    .
  },

But i cannot add HTML tags inside the text, on the JSON file, instead of getting

Welcome to MY APP

I'm getting

Welcome to < br > MY APP

How can i fix this?

EDIT

I do NOT want to remove the tags, my JSON file is modified by the backend, and it can and will contain HTML Tags, i want those tags to work on the output.

JADE Example Where the content is binding

div(class="col-lg-4 col-md-4 col-sm-4 col-xs-12 footer-left")
  p(class="text-center") 
    {{ 'page.PAGES_WELCOME' | translate }} 

Answer 1

Angular sanitizes any html strings during its interpolation. In order to get around this you will need to mark the HTML as safe in $sce before injecting. Then also use ngBindHtml to output the html.

I've not used angular-translate before, but this may work:

//app is the main module
app.filter("htmlSafe", ['$sce', function($sce) {
    return function(htmlCode){
        return $sce.trustAsHtml(htmlCode);
    };
}]);

//then to output it
<span data-ng-bind-html="'page.PAGES_WELCOME' | translate | htmlSafe"></span>

Answer 2

Install ngSanitize module.

It makes you able to bind html content, then change your code like this:

ng-bind-html="'a_key_with_html' | translate"

Answer 3

But i cannot add HTML tags inside the text, on the JSON file, instead of getting

Welcome to MY APP

I'm getting

Welcome to

MY APP

You have a <br> which is breaking the line like you said you do not want so remove it like so:

{
   "page": {
    "PAGES_WELCOME" : "Welcome to {{appName}}"
  },

  "login": {
    .
    .
    .
    .
  },

Answer 4

Tested with AngularJS 1.4.7, I just use this:

<span data-ng-bind-html="'my.i18n.code.to.translate.html.tags' | translate"></span>

Since I do not want to inject any filter but above is just worked on my own trusted i18n string. Of course, the accepted answer would be more safe but this one is just work right away.

Answer 5

I actually really don't want to use the tags in my html template. The tags isn't meaningful.

I finally got it to work. Environment: Angular 1.5.8, angular-tranlsate: 2.11.0

My solution is: 1. load ngSanitize and init the module

2. $translateProvider.useSanitizeValueStrategy('sanitize');

3. <p ng-bind-html="'Please <strong>refresh</strong> the browser' | translate"></p>

Answer 6

您可以保留JSON文件，然后只需使用HTML的innerHTML属性来渲染文本，如下所示：

 <div [innerHTML]="'page.PAGES_WELCOME' | translate"></div>