Angular фильтр, который генерирует html

У меня есть небольшой фильтр angular, который вставляет значок (bootstrap) вместо истинного значения. Он работает, но html закодирован:

  var conApp = angular.module('conApp', []);
  conApp.filter('trueIcon', function($filter){
    return function(booleanValue){
        return booleanValue ? '<i class="icon-ok"></i>' : '';
    }
  });

Мне нужно реализовать еще один фильтр для декодирования html? Есть ли способ "angular" сделать это?

Ответ 1

Вам нужно использовать ng-bind-html для рендеринга html.

<span ng-bind-html="foo | trueIcon"></span>

Это говорит... что действительно не для каких фильтров. Фильтры больше предназначены для очистки данных, которые записываются в представление, а не генерируют элементы самого представления /DOM. Вероятно, вам лучше создать директиву для этого:

app.directive('trueIcon', function() {
   return {
      restrict: 'E',
      template: '<i ng-class="{\'icon-ok\': value, \'icon-not-okay\': !value}"></i>',
      scope: {
         value: '='
      }
   };
});

<true-icon value="foo"></true-icon>

Ответ 2

AngularJS дезинфицирует результаты оценки экспрессии по умолчанию. Чтобы отобразить HTML как разметку, у вас есть 2 варианта:

http://docs.angularjs.org/api/ngSanitize.directive:ngBindHtml (из модуля ngSanitize)
http://docs.angularjs.org/api/ng.directive:ngBindHtmlUnsafe (я бы не рекомендовал этот вариант, поскольку он открывает потенциальные угрозы безопасности).

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