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

После прочтения шага 9 руководства по AngularJS я создал свой собственный фильтр 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>

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

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

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

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

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

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

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

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

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

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

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

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

требуется angular-sanitize

var app = angular.module("myApp", ['ngSanitize']);

Gist Link