Как создать фильтр angularjs, который выводит HTML

После прочтения Шаг за шагом по AngularJS шаг 9 Я создал свой собственный фильтр AngularJS, который должен преобразовывать логические данные в html.

Вот мой код фильтра:

angular.module('phonecatFilters', []).filter('iconify', function () { // My custom filter
    return function (input) {
        return input ? '<i class="icon-ok"></i>' : '<i class="icon-remove"></i>';
    }
});

Вот мой код HTML:

<dt>Infrared</dt>
  <dd>{{phone.connectivity.infrared | iconify }}"></dd>

Проблема в том, что borwser отображает возвращаемое значение буквально как:

<i class="icon-ok"></i>

не как значки (или отображаемые html), которые должны появиться.

Вот пример JSFiddle

Я думаю, что во время этого процесса возникает определенная санитария.

Можно ли отключить эту очистку для этого конкретного фильтра?

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

<i class="icon-{{phone.connectivity.infrared | iconify}}"><i>

но это не то, что я хочу.

Ответ 1

Вы должны использовать директиву ng-bind-html (требуется импортировать модуль sanitize и js файл): https://docs.angularjs.org/api/ng/directive/ngBindHtml

<span ng-bind-html='phone.connectivity.infrared | iconify'></span>

Вам также нужно импортировать CSS (Bootstrap, я думаю), чтобы иметь возможность видеть значок, когда он работает.

Я предоставил рабочий пример.

Ответ 2

Если я не читаю это неправильно, вы приближаетесь не по пути

Я думаю, что ng-class является директивой, необходимой для этого задания, и более безопасен, чем рендеринг для атрибута класса.

в вашем случае просто добавьте строку объекта с строками id как класс и значение в качестве оцененного выражения

<i ng-class="{
'icon-ok':!phone.connectivity.infrared,
'icon-remove':phone.connectivity.infrared
}"></i>'

на стороне примечания, вы должны использовать только директивы (встроенные и настраиваемые) для управления html/dom, и если вам нужен более сложный html-рендеринг, вы должны искать директиву вместо этого

Ответ 3

Попробуйте этот фильтр

filter('trust', ['$sce',function($sce) {
  return function(value, type) {
    return $sce.trustAs(type || 'html', value);
  }
}]);

Gist Link