Angular Перевести HTML-теги

Я знаю, что это было задано здесь раньше, но ни один из ответов, похоже, не работает для моего случая.

Я купил эту тему Angle, которая работает с Angular 1.4.2 и Angular translate 2.6.0 (даже обновлено для продолжения 2.7.2)

Шаблон по умолчанию имеет модуль перевода на нем

Это конфигурационный файл

  $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

И файлы перевода в формате JSON

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

  "login": {
    .
    .
    .
    .
  },

Но я не могу добавить HTML-теги внутри текста в файле JSON вместо того, чтобы получать

Добро пожаловать! MY APP

Я получаю

Добро пожаловать в <br> MY APP

Как я могу это исправить?

ИЗМЕНИТЬ

Я не хочу удалять теги, мой JSON файл модифицируется бэкэнд, и он может содержать HTML-теги, и я хочу, чтобы эти теги работали на выходе.

JADE Пример, где содержимое является обязательным

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

Ответы

Ответ 1

Angular санирует любые строки html во время интерполяции. Чтобы обойти это, вам нужно будет пометить HTML как безопасный в $sce перед инъекцией. Затем также используйте ngBindHtml для вывода html.

Я раньше не использовал angular -трансляцию, но это может работать:

//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>

Ответ 2

Установите модуль ngSanitize.

Это позволяет вам связывать содержимое html, а затем изменять свой код следующим образом:

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

Ответ 3

Но я не могу добавить HTML-теги внутри текста в файле JSON вместо того, чтобы получать

Добро пожаловать в MY APP

Я получаю

Добро пожаловать в

MY APP

У вас есть <br>, который разбивает строку так, как вы сказали, что не хотите, чтобы удалить ее так:

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

  "login": {
    .
    .
    .
    .
  },

Ответ 4

Протестировано с помощью AngularJS 1.4.7, я просто использую это:

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

Так как я не хочу вводить какой-либо фильтр, но выше просто работает над моей собственной доверенной строкой i18n. Конечно, принятый ответ был бы более безопасным, но этот вопрос сразу же работает.

Ответ 5

Я действительно не хочу использовать теги в своем html-шаблоне. Теги не имеют смысла.

Наконец-то я получил его на работу. Окружающая среда: Angular 1.5.8, angular -tranlsate: 2.11.0

Мое решение: 1. Загрузите ngSanitize и запустите модуль

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

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

Ответ 6

Вы можете сохранить ваш файл JSON в том виде, как он есть, а затем просто использовать атрибут innerHTML в HTML, чтобы визуализировать ваш текст следующим образом:

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