ng-bind-html с angular-translate отображает текст вместо тега HTML

Я вернулся к старому проекту AngularJS (1.7.2) с angular-translate и борюсь с ng-bind-html.

В моем HTML я написал это

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

Результат, которого я ожидаю,

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

Что у меня есть в моем файле перевода:

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

Что я на самом деле получаю:

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

Что я делаю не так ?

(да, у меня в модулях ngSanitize)

Спасибо


angularjs angular-translate ng-bind-html
person Valentin Coudert    schedule 15.06.2018    source источник

Ответы (2)


arrow_upward
1
arrow_downward

NgTranslate использует собственный Sanitizer (документы)

Чтобы глобально изменить стратегию очистки, используйте $translateProvider.useSanitizeValueStrategy("STRATEGY");. Если вы хотите использовать другую стратегию только для этого элемента, используйте атрибут translate-sanitize-strategy

person MrWook    schedule 15.06.2018
comment
ты прав! Я использовал стратегию «побега». Переход на «sce» сработал. - person Valentin Coudert; 18.06.2018

arrow_upward
0
arrow_downward

Возможный дубликат этого.

Кажется, это связано с декодированием HTML. Добавьте эту функцию:

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

И окружите то, что вы печатаете: decodeHtml(...)

Просто посмотрите на этот plunkr

person Grenther    schedule 15.06.2018
comment
функция decodeHtml, похоже, не является частью Angular и напрямую манипулирует DOM, чего я хотел бы избежать - person Valentin Coudert; 15.06.2018
comment
Проверьте отредактированный ответ, просто посмотрите на файл plunkr. Должен быть в состоянии понять это оттуда. - person Grenther; 15.06.2018