Angular filter that generates html

Question

I have a small angular filter that insert an (bootstrap) icon in place of a true value. It works but the html is encoded:

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

Do i have to implement another filter to decode the html ? Is there an "angular" way of doing this ?

Answer 1

You need to use ng-bind-html to render html.

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

That said... that's really not what filters are for. Filters are more for scrubbing data being written to a view, rather than generating elements of the view/DOM itself. You'll probably be better off creating a directive for that:

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>

Answer 2

AngularJS is sanitizing results of expression evaluation by default. To display HTML as markup you've got 2 options:

• http://docs.angularjs.org/api/ngSanitize.directive:ngBindHtml (from the ngSanitize module)
• http://docs.angularjs.org/api/ng.directive:ngBindHtmlUnsafe (I wouldn't recommend this one as it opens up potential security risks).

While the above will make your filter work, maybe you should consider turning it into a directive?