$sce.trustAsHtml vs. ng-bind-html

Question

Why can\'t I do this:

{{data | htmlfilterexample}}

When, inside the filter, I am returning:

return $sce.         


        

Answer 1

$sce.trustAsHtml() produces a string that is safe to use with ng-bind-html. Were you to not use that function on the string then ng-bind-html would yield the error: [$sce:unsafe] Attempting to use an unsafe value in a safe context. So $sce doesn't get rid of the need for ng-bind-html rather it makes the string it processes safe to use with it.

The specific issue you're running into lies in the difference between ng-bind and ng-bind-html

Using {{}} is the equivalent of ng-bind. So, looking at the ng-bind source code (ng-bind-* source code) we see that it uses this:

element.text(value == undefined ? '' : value);

while ng-bind-html, amongst other things, does the following:

var parsed = $parse(attr.ngBindHtml);
element.html($sce.getTrustedHtml(parsed(scope)) || '');

The key takeaway being that the ng-bind use of .text (http://api.jquery.com/text/) results in the text representation of the string being displayed (ignoring whether it's HTML trustworthy).

While the ng-bind-html use of .html (http://api.jquery.com/html/) results in the html interpreted version (if declared safe by getTrustedHtml())