ng-bind с AngularJS переводной интерполяцией

Question

Мне нужно визуализировать символы, такие как <и>, которые могут быть включены в имя или фамилию пользователя. Я использую угловой перевод для отображения имени, передавая имя и фамилию в качестве значений. Однако, если имя или фамилия содержит <, значение не будет отображаться. Я думаю, что мне нужно использовать что-то вроде ng-bind="translation_key | translate | values" но это неверно. Как я могу использовать ng-bind с интерполяцией углового перевода? Это правильный способ рендеринга переведенного значения, содержащего символы, такие как <,>? Благодарю.

*Редактировать

Это почти работает, но дезинфицирующее средство выдает ошибку.

ng-bind="'locales.user_filter' | translate: { first: user.firstName, last: user.lastName }"

Ошибка: [$sanitize:badparse] Дезинфицирующему средству не удалось проанализировать следующий блок html:

Answer 1

Я использовал фильтр перед передачей значений ключу перевода.

.filter('htmlEntities', function () {
  return function (input) {
    return String(input).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
  };
});


var first = $filter('htmlEntities')(scope.user.firstName);
var last = $filter('htmlEntities')(scope.user.lastName);
scope.displayName = $translate.instant('locales.user_filter', { first: first, last: last });

<td ng-bind-html="displayName"></td>