После прочтения шага 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), которые должны отображаться.
Я думаю, что при этом происходит некоторая санация.
Можно ли отключить эту очистку для этого конкретного фильтра?
Также я знаю, как отображать значки, не возвращая вывод HTML из фильтра, а просто текст «ОК» или «Удалить», который я затем могу заменить на:
<i class="icon-{{phone.connectivity.infrared | iconify}}"><i>
но я не этого хочу.
angular-sanitize.js
файл, чтобы это работало. Если вы хотите сделать то же самое, не включая эту дополнительную библиотеку, вы можете использоватьng-bind-html-unsafe
директиву.ng-html-bind-unsafe
и требует, чтобы содержимое html было явно помечено как «безопасное» - см .: docs.angularjs.org/api/ng.$sce#Example{{myContent | myFilter | html_safe}}
если я не правильно читаю, вы приближаетесь не в том направлении
Я думаю, что ng-class - это директива, которая вам нужна для этой работы, и она безопаснее, чем рендеринг в атрибут класса.
в вашем случае просто добавьте строку объекта со строками идентификатора в качестве класса и значением в качестве оцененного выражения
<i ng-class="{ 'icon-ok':!phone.connectivity.infrared, 'icon-remove':phone.connectivity.infrared }"></i>'
с другой стороны, вы должны использовать только директивы (встроенные и настраиваемые) для управления html / dom, и если вам нужен более сложный рендеринг html, вы должны вместо этого посмотреть на директиву
источник
<i ng-class="phone.connectivity.infrared ? 'icon-ok' : 'icon-remove'"></i>
Попробуйте этот фильтр
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
источник