how to avoid double encoding with $sce

Question

Angular $sce service seems to be encoding characters and not trusting the html. Is there an option to have the html trusted?

$scope.text = $sce.trustAsHtml('it&#39;s broken')

An example.

<p>it&#39;s working</p>
<p>{{ text }}</p>

Looks like.

it's working
it&#39;s broken

I'd rather not use ng-bind-html because it's meant to be used in a filter like the following.

{{ text | render }}

You need to use ng-bind-html since ng-bind-html-unsafe no longer exists. Check this out: http://stackoverflow.com/a/19705096/1336081 — mobabur94, Aug 15 '14 at 20:14
Could you explain the rational behind using a filter? Thanks — apairet, Aug 15 '14 at 20:46
Maybe a filter is wrong, but the idea is to render a tweet from the raw tweet text. — AJcodez, Aug 16 '14 at 01:38

score 0 · Accepted Answer · answered Aug 16 '14 at 10:53

It is not the $sce that encode your html, actually nothing does that.

But when you use an interpolation {{ text }}, angular will detect that and replace it with a correct value via textNode.nodeValue, not something like innerHTML. Therefore, your ' will be treated as a normal text, not an encoded HTML entity.

That's why the ng-bind-html exists, and nothing prevent you from using the filter inside the ng-bind-html expression.

<div ng-bind-html="text | render | trustAsHtml"></div>

Example filters:

.filter('render', function () {
  return function (value) {
    return value + '!';
  };
})

.filter('trustAsHtml', function ($sce) {
  return function (value) {
    return $sce.trustAsHtml(value);
  };
})

Example Plunker: http://plnkr.co/edit/F8OQvoSzOR06TPepc2Fo?p=preview

how to avoid double encoding with $sce

1 Answers1