How to output HTML in angularjs with just using filter

Question

I'm able to unescape the string that has some markup in it using ngSanitize and in HTML I use

<span ng-bind-html="myHTML"></span>

I've created a filter

.filter('safe', function($sce) {
    return function(val) {
      return $sce.trustAsHtml(val);
  };
})

I wonder if I can do something like this instead?

<span>{{ myHTML | safe }}</span>

Right now it does not really work and I'm trying to see what I'm missing.

Are you getting that "HTML not allowed" angular error?

Jorg
– Jorg

2014-04-09 00:41:29 +00:00
Commented Apr 9, 2014 at 0:41 — Jorg
– Jorg, Commented Apr 9, 2014 at 0:41
No error at all except is just print like regular strings

Ali
– Ali

2014-04-09 01:13:52 +00:00
Commented Apr 9, 2014 at 1:13 — Ali
– Ali, Commented Apr 9, 2014 at 1:13

GonchuB · Accepted Answer · 2014-04-09 00:51:11Z

2

You can make your own filter for that:

var app = angular.module('yourModuleName');
app.filter('safe', function($sce) {
    return function(htmlString) {
        return $sce.trustAsHtml(htmlString);
    }
};

Your markup would be something like:

<span ng-bind-html="myHTML | safe"></span>

answered Apr 9, 2014 at 0:51

GonchuB

7055 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Ali Over a year ago

That's what I currently have but I'm looking for making it like example above

Ali Over a year ago

So, like if I don't use ng-bind-html is that possible to do so?

GonchuB Over a year ago

I really don't think so. {{ }} inside elements get evaluated and shown as strings (the element's text).

GonchuB Over a year ago

If you could, there would be no need for $sce, you could just place some html in a span and get it rendered...

Ali Over a year ago

True on that part except I'm injecting this from a JSON file :(

|

Collectives™ on Stack Overflow

How to output HTML in angularjs with just using filter

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related