How to render raw html correctly?

I’m using ngSanitize to render raw html in my angular project. For example:

<p ng-bind-html='article.body'>

I’m using console.log to print the contents of my article.body, it’s:

<p><img alt="" src="" style="height:500px; width:300px;" /></p>

But the result of my page is:

<p><img alt="" src="" /></p>

The style was removed. How does ng-bind-html work? Why it remove my style? Any suggestion for this? Thanks.

ngSanatize removes style tags by default, there is a fork here that allows them:

What else should I do? I did:

  1. bower uninstall angular-sanitize --save
  2. Download the textAngular-sanitize.js file and add it to my index.html

Unfortunately the style of my img elements are still removed.


try adding this directive

 App.directive('bindCompileHtml', ['$compile', function ($compile) {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
        scope.$watch(function () {
            return scope.$eval(attrs.bindCompileHtml);
        }, function (value) {

            element.html(value && value.toString());
            var compileScope = scope;
            if (attrs.bindCompileHtml) {
                compileScope = scope.$eval(attrs.bindCompileHtml);

and then use it

<p bind-compile-html='article.body'>

Yes, it works. Thank you.