javascript - Rendering text to html with Angular - Stack Overflow

I am trying to render a text as html using ng-bind as the docs show

<div ng-bind-html="text"></div>

The problem is that Angular removes the style attribute and renders this:

"<mark style='background-color:#FF9DFF;'>APPLE</mark>."

to this:

<mark>APPLE</mark>

How to render as html and keep the styles? I am using Angular version 1.2.6

I am trying to render a text as html using ng-bind as the docs show

<div ng-bind-html="text"></div>

The problem is that Angular removes the style attribute and renders this:

"<mark style='background-color:#FF9DFF;'>APPLE</mark>."

to this:

<mark>APPLE</mark>

How to render as html and keep the styles? I am using Angular version 1.2.6

• javascript
• html
• angularjs
• html-rendering

Share Improve this question Follow edited Mar 14, 2014 at 16:25 special0ne asked Mar 14, 2014 at 14:49 special0nespecial0ne 6,2631818 gold badges6868 silver badges107107 bronze badges 1

• just be reminded $sce is v1.2 and above. – wayne Commented Mar 14, 2014 at 15:10

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

You may try this function when you're doing ng-bind-html in your controller

$sce.trustAsHtml('myHTML'); //$sce would be the parameter with $scope in module

Hope this will work

$NgSanitizeDocs

First of all include angular-sanitize.js

<div ng-bind-html="deliberatelyTrustDangerousSnippet()"></div>

Then in the controller, add this method

pk.controller("createBlog", function($scope, $sce){
   //ace needs to be injected in the controller.
   $scope.deliberatelyTrustDangerousSnippet = function() {
       return $sce.trustAsHtml($scope.htmlcontent); //html content is th binded content.
   };
})