Angularjs display field as html

Question

I have a a field that contains HTML. When I display using {{field}} the html is not rendered. How do I display the field as rendered html? customForm.Description contains html:

<h4>Work Requests</h4>
<div ng-repeat="customForms in customFormGroups" class="row">
<div ng-repeat="customForm in customForms" class="col-sm-4">
    <strong>{{customForm.Name}}</strong>
    <p>{{customForm.Description}}</p>
    <div class="form-group">
        <a class="btn btn-primary" href="javascript:void(0);" ng-click="selectService(customForm)">Select</a>
    </div>
</div>
</div>

See: http://stackoverflow.com/questions/18340872/how-do-you-use-sce-trustashtmlstring-to-replicate-ng-bind-html-unsafe-in-angu — tymeJV, Jun 27 '14 at 14:51

score 2 · Accepted Answer · answered Jun 27 '14 at 15:12

Use the $sce service to display the html. Create a function in the controller that will return the trusted html:

$scope.displaySafeHtml = function(html){
  return $sce.trustAsHtml(html);
}

Then use ng-bind-html with that function:

<p ng-bind-html="displaySafeHtml(customForm.Description)"></p>

Demo

See also: https://docs.angularjs.org/api/ng/service/$sce

JSager · Answer 2 · 2014-06-27T20:09:19.490

0

Edited per request:

This is a potentially dangerous operation. If you are positive you trust that text and nobody's going to hack it, you can inject the $sce service into your controller.

I've taken the liberty (at suggestion of others) of copying this example from the angular documentation:

function Ctrl($scope, $sce) {
    $scope.snippet =
      '<p style="color:blue">an html\n' +
      '<em onmouseover="this.textContent=\'PWN3D!\'">click here</em>\n' +
      'snippet</p>';
    $scope.deliberatelyTrustDangerousSnippet = function() {
      return $sce.trustAsHtml($scope.snippet);
    };
  }

Then in your html:

<div ng-bind-html="deliberatelyTrustDangerousSnippet()"></div>

I really strongly recommend you read the full documentation here and understand what they're trying to warn you about:

https://docs.angularjs.org/api/ngSanitize/service/$sanitize

edited Jun 27 '14 at 20:09

answered Jun 27 '14 at 14:51

JSager

1,420
9
18

You should explain how it works, not just simply link to a resource. – putvande Jun 27 '14 at 14:55
Wait, seriously? That page explains EXACTLY how it works. It's also part of the angular documentation, with various demos of it in action, multiple warnings about the safety of doing things with it, and a list of optional directives to make things safer or not. I'm honestly shocked that people are downvoting this, it's a much better answer than if I typed a snippet and left it out there to be just casually used without understanding. – JSager Jun 27 '14 at 15:03
@JSager Nobody will disagree with your comment, it does explain it, however as a quality answer that applies today as well as next year when that link might disappear means you'll need to add a little more info directly to your answer. – lucuma Jun 27 '14 at 15:40
@lucuma I guess so. I honestly feel that explaining to someone that this is a documented feature of angular is better than trying to summarize. But at your request I've updated my answer to include examples from their page with the best warning I can provide. – JSager Jun 27 '14 at 20:11
@JSager I think everyone removed their -1's from your answer now. In fact, I think we should also downvote questions that are directly answerable from help docs but sometimes the help docs aren't written in a clear enough manner that everyone understands them. The early angular help docs weren't very clear. – lucuma Jun 27 '14 at 21:00

Angularjs display field as html

2 Answers2