AngularJS HTML filter

Question

I have an AngularJS app, I need to have the string to be filtered (with a filter) to show the correct HTML formatting:

This:

$scope.text = "This is <strong>GREAT</strong>";

Needs to be:

This is GREAT

(And other HTML tags, like <br> and so forth should be working)

It should work thru a filter, like:

{{text | toHTML}}

I know about ng-bind-html BUT I need it to work thru a filter and NOT with ng-bind-html.

I found some examples where the filter needs to be constructed for each step (for the <a> there is a code, for <br> another one...)

Is there a way to filter a scope element to handle the HTML formatting?

You can't do that ... interpolation only inserts text...not html — charlietfl
– charlietfl, Commented Apr 26, 2017 at 10:30
You can with $sce.trustAsHtml as explain in the answers below, but beware that the html you display is trusted and doesn't come from a user. Otherwise it's a high risk of XSS flaws. — Damien
– Damien, Commented Apr 26, 2017 at 11:45

tanmay · Accepted Answer · 2017-04-26 10:39:31Z

2

Create a filter that returns $sce.trustAsHtmled input as output.

Something like:

.filter('toHTML', ['$sce', function($sce){
    return function(val) {
        return $sce.trustAsHtml(val);
    };
}])

EDIT: if you can only use {{}} to render, I am afraid this won't help you. Maybe you can create a directive that does the element level modifications for you.

edited Apr 26, 2017 at 10:39

answered Apr 26, 2017 at 10:18

tanmay

7,9112 gold badges23 silver badges39 bronze badges

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

Comments

charlietfl · Accepted Answer · 2017-04-26 11:53:36Z

1

Short answer is....this can not be done and is why ngBindHtml exists in the first place

You are asking to change the default internal compiling of {{}} from inserting text nodes to inserting html elements

Regardless of what you define inside {{}} you can't change the fact that it will always be inserted as a text node and any html tags inside it will not be converted to dom elements.

There is a good XSS security reason for this behavior also. By inserting as text it prevents insertion of malicious script, iframe etc from user input or corrupted data sources

edited Apr 26, 2017 at 11:53

answered Apr 26, 2017 at 11:47

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Comments

scary_devil · Accepted Answer · 2017-04-26 10:32:18Z

0

Create this filter as below

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

Use the filter like this

<p ng-bind-html="textCmt | unsafe"></p>

answered Apr 26, 2017 at 10:32

scary_devil

2784 silver badges20 bronze badges

3 Comments

Mr.Web Over a year ago

I CANNOT use ng-bind-html has to be as a filter in curly braces as wrote above.

charlietfl Over a year ago

@Mr.Web you can not change the fact that {{}} only inserts text. There is no workaround that would make it insert html. That is why ng-bind-html exists

Mr.Web Over a year ago

@charlietfl ! This is a good answer. "There is no workaround that would make it insert html". Please answer my question with this answer and the reasons why so I can tick it.

Collectives™ on Stack Overflow

AngularJS HTML filter

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related