Ng-bind-html Or Ngsanitize Not Working

I am trying to display some data from a JSON query, including a string of HTML content in my AngularJS app (using Angular 1.2.15, Angular-Sanitize 1.2.16, Yeoman 1.0). I've tried e

Solution 1:

Use this somewhere in your controller:

// uses js machinery to decode HTML
function decodeHtml(html) {
  var txt = document.createElement("textarea");
  txt.innerHTML = html;
  return txt.value;
}

var encodedHtml = '<!-- SC_OFF --><div class="md"><p>Can be drugs, but also things like TV, games, sex, etc</p></div><!-- SC_ON -->';
$scope.html = decodeHtml(encodedHtml);

and in your template:

<p>{{html}}</p>

Demo

Solution 2:

I've just run into the same issue and found that decoding the html and then trusting it works, without having to create a custom directive:

Inside your controller:

functionhtmlDecode(input){
    var e = document.createElement('div');
    e.innerHTML = input;
    return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
}

$scope.html = $sce.trustAsHtml(htmlDecode($scope.post.selftext_html));

Html:

<divng-bind-html="post.html"></div>