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.
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;
$sce.trustAsHtml(questions) in controller and use only <p ng-bind-html="question.body"></p>. ?
OR have a filter:
angular.module('myApp')
.filter("sanitize", ['$sce', function($sce) {
return function(htmlCode){
return $sce.trustAsHtml(htmlCode);
}
}]);
in html:
<div ng-bind-html="question.body | sanitize"></div>
