How to create angularjs filter which outputs HTML

Question

After reading AngularJS tutorial step-9 I have created my own AngularJS filter, which should convert boolean data into html.

Here is my filter code:

Answer 1

You should use the ng-bind-html directive (require to import the sanitize module and js file): https://docs.angularjs.org/api/ng/directive/ngBindHtml

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

You also need to import the CSS (Bootstrap I guess) to be able to see the icon when it works.

I have provided a working example.

Answer 2

Try this filter

filter('trust', ['$sce',function($sce) {
  return function(value, type) {
    return $sce.trustAs(type || 'html', value);
  }
}]);

requires angular-sanitize

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

Gist Link

Answer 3

unless I am reading it wrong, you are approaching in the wrong way

I think ng-class is directive you need for this job and is safer then rendering to class attribute.

in your case just add object string with the id strings as the class and the value as the evaluated expression

<i ng-class="{
'icon-ok':!phone.connectivity.infrared,
'icon-remove':phone.connectivity.infrared
}"></i>'

on a side note, you should only use directives (built-in and custom) to manipulate html/dom and if you needed a more complex html render you should look at directive instead