Bind HTML string with custom style

Question

I want to bind a HTML string with an custom style to the DOM. However ngSanitize removes the style from the string.

For example:

In the controller:

$scope.htmlString = "<span style='color: #89a000'>123</span>!";

And in DOM:

<div data-ng-bind-html="htmlString"></div>

Will omit the style attribute. The result will look like:

<div data-ng-bind-html="htmlString"><span>123</span>!</div>

Instead of:

<div data-ng-bind-html="htmlString"><span style='color: #89a000'>123</span>!</div>

Question: How can I achieve this?

Pavel Arapov · Accepted Answer · 2015-02-13 15:28:13Z

72

As already mentioned @Beyers, you have to use $sce.trustAsHtml(), to use it directly into the DOM, you could do it like this, JS/controller part:

$scope.trustAsHtml = function(string) {
    return $sce.trustAsHtml(string);
};

And in DOM/HTML part

<div data-ng-bind-html="trustAsHtml(htmlString)"></div>

answered Feb 13, 2015 at 15:28

Pavel Arapov

8577 silver badges8 bronze badges

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

4 Comments

Jesús Castro Over a year ago

I tried your code with the AngularJS version 1.3.15 and it didn't work :(

Jesús Castro Over a year ago

I found the Chris's answer with this post and it worked perfectly. :) stackoverflow.com/questions/18340872/…

mpgn Over a year ago

be carefull, don't use this is if the user can use the input 'string', otherwise you have an XSS

Kirill Husiatyn Over a year ago

This variant is nice

grigson · Accepted Answer · 2015-10-29 18:19:54Z

51

What about custom angular filter? This works in 1.3.20

angular.module('app.filters')
    .filter('trusted', function($sce){
        return function(html){
            return $sce.trustAsHtml(html)
        }
     })

Use it like <div ng-bind-html="model.content | trusted"></div>

answered Oct 29, 2015 at 18:19

grigson

4,0011 gold badge35 silver badges22 bronze badges

1 Comment

sidonaldson Over a year ago

This is the better solution

Beyers · Accepted Answer · 2014-02-01 21:22:58Z

13

If you trust the html, then you can use $sce.trustAsHtml to explicitly trust the html. Quick example:

In controller (remember to inject $sce into your controller):

$scope.htmlString = $sce.trustAsHtml("<span style='color: #89a000'>123</span>!");

And in DOM, same as what you had:

<div data-ng-bind-html="htmlString"></div>

answered Feb 1, 2014 at 21:22

Beyers

9,11847 silver badges59 bronze badges

2 Comments

Tim Over a year ago

Isn't there another way? Preferably from withing the DOM itself. This one doesn't end up clean in my situation.

Beyers Over a year ago

Apart from completely disabling $sce docs.angularjs.org/api/… (not recommended), there isn't a build-in way to handle this within the DOM itself that I'm aware of. Pretty sure you should be able to get this done writing your own custom directive.

Tome Pejoski · Accepted Answer · 2014-02-01 23:20:27Z

0

You should create your own custom directive that will have the html as template or reference it with templateUrl. Within the html you can use ng-style to add an object as your style.

Here's an example: http://jsfiddle.net/tomepejo/5AsQE/

answered Feb 1, 2014 at 23:20

Tome Pejoski

1,5802 gold badges11 silver badges34 bronze badges

Comments

bsm · Accepted Answer · 2016-08-01 16:36:00Z

0

You can use textAngular, couse ngSanitize whitelists are not flexible ( see this issues for more details: https://github.com/angular/angular.js/issues/5900)

answered Aug 1, 2016 at 16:36

bsm

6065 silver badges6 bronze badges

1 Comment

Heretic Monkey Over a year ago

Whilst this may theoretically answer the question, it would be preferable to include the essential parts of the answer here, and provide the link for reference.

Collectives™ on Stack Overflow

Bind HTML string with custom style

5 Answers 5

4 Comments

1 Comment

2 Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

1 Comment

2 Comments

Comments

1 Comment

Linked

Related