Escape HTML text in an AngularJS directive

Question

Is there an angular JS command that will do HTML escaping on text? I am processing a custom directive and have need to escape some of the output which it generates.

Answer 1

This answer is about escaping, not sanitizing HTML. There are two approaches:

1. As mentioned by @maniekq, if you can work on the DOM, do:

   element.text( scope.myValue );
   

2. From this answer, you can use this code from mustache.js and e.g. create an angular filter:

   angular.module('myModule').filter('escapeHtml', function () {
   
       var entityMap = {
           "&": "&",
           "<": "&lt;",
           ">": "&gt;",
           '"': '&quot;',
           "'": '&#39;',
           "/": '&#x2F;'
       };
   
       return function(str) {
           return String(str).replace(/[&<>"'\/]/g, function (s) {
               return entityMap[s];
           });
       }
   });
   

Answer 2

Sanitizing is one thing, but to display all characters and not "execute" HTML code I have used "text" function to set value.

In your directive, to set value, instead of writing:

element.html( scope.myValue );

write:

element.text( scope.myValue );

Answer 3

You can implement filter like this:

app.filter('escape', escape);

 function escape() {
    return function (html) {
      return angular.element('<pre/>').text(html).html();
    };
  }