How to render raw html correctly?

ionic-v1
1

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="http://mydomain.com/img/124417660.jpg" style="height:500px; width:300px;" /></p>

But the result of my page is:

<p><img alt="" src="http://mydomain.com/img/124417660.jpg" /></p>

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

2

ngSanatize removes style tags by default, there is a fork here that allows them: https://github.com/fraywing/textAngular/blob/master/src/textAngular-sanitize.js

3

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.

4

hi,

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);
            }
            $compile(element.contents())(compileScope);
        });
    }
 };
}])

and then use it

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

Yes, it works. Thank you.