I followed the instructions provided in a related post on the same topic. I used 'ngSanitize' and formatted the HTML content using 'sce.trustAsHtml()', and it rendered correctly when the HTML contained both text and images. However, I encountered an issue when the HTML content had an image loaded using CSS. Here is the HTML content that I am attempting to bind:
<html> <head> <style> body{ padding: 0 0; margin: 0 0; } .img-wrapper{
width: 100%; height: 50%; margin: 0 auto; background: url('http://www.fnordware.com/superpng/pnggrad8rgb.png')
no-repeat center; -webkit-background-size: contain; -moz-background-size: contain;
-o-background-size: contain; background-size: contain; } </style> </head> <body> <div>
<div class='img-wrapper'></div><div style='font-size: 20px;' >Test the image upload or not
successfully</div> <div align=center style='font-size: 17px;'>Address goes here</div>
</div> </body></html>
My JavaScript code is as follows:
$scope.content = $sce.trustAsHtml(adTemp.content);
And the HTML code to bind the content is as follows:
<div ng-bind-html="content"> </div>