После прочтения Шаг за шагом по 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), которые должны появиться.
Я думаю, что во время этого процесса возникает определенная санитария.
Можно ли отключить эту очистку для этого конкретного фильтра?
Также я знаю, как отображать значки, не возвращая выходные данные 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 является директивой, необходимой для этого задания, и более безопасен, чем рендеринг для атрибута класса.
в вашем случае просто добавьте строку объекта с строками id как класс и значение в качестве оцененного выражения
<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);
}
}]);