4

How can I prevent ng-repeat from html encoding / escaping my content in AngularJS 1.2? Do I need to write my own directive? I've read that ng-bind-html-unsafe was deprecated in Angular 1.2, but I haven't found conclusive information in regards to using it with ng-repeat. Some info has said to use ng-bind-html, but that didn't work either.

<div ng-repeat="entry in blogEntries" ng-bind-html-unsafe="entry.title">
    <div class="well">
        <div>{{entry.date }}</div> {{entry.title}}
    </div>
</div>

This results in some of my text being displayed as the following, instead of the HTML rendering:

<ul> <li>Blah1 5.1<li> <li>Blah 3<li></ul>

I also tried ng-bind-html

I can upgrade if necessary

Do I need to use the ng-sanitize module in order to use ng-bind-html?

Hoppe
  • 6,508
  • 17
  • 60
  • 114
  • `ng-repeat` sets in the inner html and `ng-bind` also sets the inner html so I don't think it makes sense to have them both... – jpillora Jun 18 '14 at 00:54
  • This is a duplicate. See previous answer: http://stackoverflow.com/questions/18340872/how-do-you-use-sce-trustashtmlstring-to-replicate-ng-bind-html-unsafe-in-angu – jpillora Jun 18 '14 at 01:00
  • @jpillora ng-bind-html didn't work. if it's a dupe, please provide answer – Hoppe Jun 18 '14 at 01:56
  • I could copy and paste the answer I linked, though that would be cheating. Basically, it's how to use https://docs.angularjs.org/api/ng/service/$sce – jpillora Jun 18 '14 at 02:32

1 Answers1

4

The directive ng-bind-html works but I had to include the sanitize module. I.e.

var blogApp = angular.module('blogApp', ['ngRoute', 'ngSanitize'])
    .config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
    ...    
}]);

<div ng-repeat="entry in blogEntries">
    <div class="well">
        <div>{{entry.date}}</div><span ng-bind-html="entry.title"></span>
    </div>
</div>
Hoppe
  • 6,508
  • 17
  • 60
  • 114
  • Including that module (in 1.2) is correct. See http://stackoverflow.com/questions/9381926/insert-html-into-view-using-angularjs – moribvndvs Jun 18 '14 at 02:27