Як створити 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>

Проблема в тому, що позичальник відображає повернене значення буквально як:

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

не як піктограми (або відображений html), які повинні з'являтися.

Ось приклад JSFiddle

Я думаю, що під час цього процесу відбувається деяка санація.

Чи можна вимкнути цю санітарну обробку для цього конкретного фільтра?

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

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

але це не те, що я хочу.

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

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

Вам також потрібно імпортувати CSS ( Bootstrap, я думаю), щоб мати можливість бачити піктограму, коли вона працює.

Я навів робочий приклад .

якщо я не читаю це неправильно, ви підходите неправильно

Я думаю, що ng-class - це директива, яка вам потрібна для цієї роботи, і є безпечнішою, ніж відтворення в атрибут 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);
  }
}]);

вимагає кутової дезінфекції

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

Суть посилання