Preserve HTML in text output with AngularJS 1.1 and AngularJS 1.2+



In this quick tip I will show you how you can preserve your HTML output with AngularJS.

By default, AngularJS will turn your HTML into normal text, in other words: make it safe so that by default people can’t insert any unwanted HTML into your page.

I have noticed that there is some confusion on how to actually do this, since there is a big difference in how to do this in AngularJS 1.1 and AngularJS 1.2+

General setup

For this example, let’s assume you have some data that needs to be displayed on the page and that you have made an AngularJS App for it. I called mine commentApp with some spoofed (fake) data that I just hardcoded.

We’ll assume that you have replaced line breaks (if necessary) with a <br />

var commentApp = angular.module('commentApp', []);
 
commentApp.controller('CommentCtrl', function ($scope) {
  $scope.comments = [
    {
      'name' : 'Some Guy',
      'text' : 'This is cool.'
    },
    {
      'name' : 'John Doe',
      'text': 'Hi, I am John Doe. This is a single-line comment to be displayed with AngularJS'
    },
    {
      'name' : 'Jane Doe',
      'text' : 'Jane doe is the female version of "John Doe".<br />This is a new line to be displayed with AngularJS'
    }
  ];
 
});

You could then use the following HTML to output the data:

<section id="comments" ng-app="commentApp" ng-controller="CommentCtrl">
  
  <ul id="comment-list">
    <li ng-repeat="comment in comments">
      <a href="#" class="profile-link">
        {{comment.name}}
      </a>
      <p>
        {{comment.text}}
      </p>
    </li>
  </ul>
   
</section>

The problem now is, that instead of a new line, the text “<br />” will be part of the comment text.



Let’s fix that!

Preserve HTML in text output with AngularJS 1.1

Prior to AngularJS 1.2, you could fix this problem by editing your HTML like this:

Change these lines:

<p>
  {{comment.text}}
</p>

into this:

<p ng-bind-html-unsafe="{{comment.text}}"></p>

This will then allow the HTML inside of the comment and parse the output as real HTML instead of text.

Preserve HTML in text output with AngularJS 1.2+

As mentioned before, in AngularJS 1.2 or AngularJS 1.3, this could no longer be done. You now have to use $sce to run your output through a filter, which you can specify to allow the HTML.

We can implement this using $sce.trustAsHtml() by adding a filter to our code (outside of the controller). This custom filter will make sure that our HTML doesn’t get filtered out by AngularJS 1.2/AngularJS 1.3 or later

We will name this filter “unsafe”. It gets passed a value, which we will return as trusted HTML output.

commentApp.filter('unsafe', function($sce) {
    return function(val) {
        return $sce.trustAsHtml(val);
    };
});

Now, modify your HTML code from this:

<p>
  {{comment.text}}
</p>

And change it to this:

<p ng-bind-html="comment.text | unsafe"></p>

This will run your comment.text through the “unsafe” filter we just created, and once again, your output will have the HTML parsed properly.

That’s it!

That’s all there is to it! I hope you liked this example. If you do, feel free to share it on your favorite social media or leave a comment!

Share the knowledge!
Share on Facebook0Tweet about this on Twitter0Share on Google+29Share on StumbleUpon52Share on Reddit4Share on LinkedIn1Share on TumblrBuffer this pageDigg this

Comments

You may also like...

Stay updated
Subscribe!