Search code examples
javascripthtmlangularjshtml-encode

Can I prevent ng-repeat from html encoding / escaping my content in AngularJS 1.2? Or need to write own directive?


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?


Solution

  • 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>