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?

score 71 · Accepted Answer · answered Feb 13 '15 at 15:28

71

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 '15 at 15:28

Pavel Arapov

847
7
8

1

I tried your code with the AngularJS version 1.3.15 and it didn't work :( – Jesús Castro Jul 07 '15 at 04:35
1

I found the Chris's answer with this post and it worked perfectly. :) http://stackoverflow.com/questions/18340872/how-do-you-use-sce-trustashtmlstring-to-replicate-ng-bind-html-unsafe-in-angu – Jesús Castro Jul 07 '15 at 05:22
3

be carefull, don't use this is if the user can use the input 'string', otherwise you have an XSS – mpgn Jan 19 '16 at 20:37
This variant is nice – Kirill Husiatyn Feb 17 '16 at 14:30

score 51 · Answer 2 · answered Oct 29 '15 at 18:19

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 '15 at 18:19

grigson

3,458
29
20

This is the better solution – sidonaldson May 27 '16 at 11:35
You, sir, just saved me a lot of time. Thanks! – Ivan Bilan Jun 19 '17 at 19:21

score 13 · Answer 3 · answered Feb 01 '14 at 21:22

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 01 '14 at 21:22

Beyers

8,968
43
56

Isn't there another way? Preferably from withing the DOM itself. This one doesn't end up clean in my situation. – Tim Feb 01 '14 at 21:40
Apart from completely disabling $sce http://docs.angularjs.org/api/ng.$sce#example_can-i-disable-sce-completely (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. – Beyers Feb 01 '14 at 22:19

score 0 · Answer 4 · answered Feb 01 '14 at 23:20

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 01 '14 at 23:20

Tome Pejoski

1,582
2
10
34

score 0 · Answer 5 · answered Aug 01 '16 at 16:36

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 01 '16 at 16:36

bsm

556
4
6

Whilst this may theoretically answer the question, [it would be preferable](http://meta.stackoverflow.com/q/8259) to include the essential parts of the answer here, and provide the link for reference. – Heretic Monkey Nov 01 '16 at 18:47

Bind HTML string with custom style

5 Answers5

Linked