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.

Internally the AngularJS sanitzer uses a encodeEntities function, but does not expose it. I know I could duplicate the function, but it seems like there should be a standard way of doing this.

---

Use-Case: I have a custom directive which does language localization. This directive uses a key lookup from a data file to find language text. In some cases this text is allowed to contain HTML, and/or the directive produces HTML to improve the resulting visual formatting. In addition this directive takes Angular expressions as parameters and uses them as replacements for tokens in the strings. I need to encode these parameters as they may not be HTML safe.

The directive is called as an attribute, for example i18n-html='welcome_text_html,1+1,user.name'. The directive then formats the string as described and uses element.html to update the DOM node.

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 = {         "&": "&amp;",         "<": "&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 );