Rendering HTML as it appears in the database in to a view using AngularJS

Question

I am using TinyMCE to style content that the user then saves to the database, an example of what the user could be saving is as below:

<ol><li><em>This</em> is a <span style="text-decoration: underline;" data-mce-style="text-decoration: underline;">HTML</span> email that <strong><span style="font-family: 'times new roman', times;">should</span></strong> <span style="font-family: tahoma, arial, helvetica, sans-serif;">contain</span> different <span style="font-family: arial, helvetica, sans-serif;">fonts</span> in weights with lists and links...</li></ol>

I am currently using ng-bind-html to display this HTML content in my view, however, it appears to be stripping the inline styles. Here is my source from the browser:

<ol><li><em>This</em> is a <span>HTML</span> email that <strong><span>should</span></strong> <span>contain</span> different <span>fonts</span> in weights with lists and links...</li></ol>

Is there a way in which I can keep these inline styles in the view?

Sudhir Bastakoti · Accepted Answer · 2015-06-15 10:12:16Z

1

you could try marking your HTML as trusted, passing in $sce, as:

yourApp.controller('someCtrl', ['$scope', '$sce', function($scope, $sce) {      
  $scope.some_html = $sce.trustAsHtml(some_html_content);
}]);

answered Jun 15, 2015 at 10:12

Sudhir Bastakoti

100k15 gold badges163 silver badges169 bronze badges

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

2 Comments

ChrisBratherton Over a year ago

Could this be implemented into a filter? So for example I could have in my html {{ message.body | trustHtml }} ?

Sudhir Bastakoti Over a year ago

@SeriousJelly yes, check this answer:: stackoverflow.com/a/19705096/350858

alisabzevari · Accepted Answer · 2015-06-15 10:10:21Z

0

If you are using Angular 1.2+ you have do this:

$scope.htmlToBind = $sce.trustAsHtml(yourHtml);

See documentation for more details.

answered Jun 15, 2015 at 10:10

alisabzevari

8,1668 gold badges47 silver badges69 bronze badges

Collectives™ on Stack Overflow

Rendering HTML as it appears in the database in to a view using AngularJS

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related