Search code examples
javascriptangularjsangularjs-ng-repeatng-bind-htmlngsanitize

AngularJS using $sce.trustAsHtml with ng-repeat

I'm trying to use $sce.trustAsHtml() with a property of an object in ng-repeat. The result is that the HTML is totally blank. The HTML outputs correctly using ngSanitize though.

<div ng-repeat="question in questions">
    <p ng-bind-html="$sce.trustAsHtml(question.body)">
    </p>
</div>

I'm on AngularJS v1.3.0-beta.3 by the way. Not sure if there's a bug or I do something wrong.

Solution

  • You can't use $sce.trustAsHtml in an expression (unless $sce is a property on the $scope) because expressions are evaluated in the context of the $scope.

    The cleanest approach is to use ngSanitize.
    The second cleanest is to expose $sce.trustAsHtml as a function in the $scope:

    <div ng-repeat="...">
    <p ng-bind-html="trustAsHtml(question.body)"></p>
</div>

$scope.trustAsHtml = $sce.trustAsHtml;