转义AngularJS指令中的HTML文本

Question

是否有一个角度JS命令将在文本上进行HTML转义？我正在处理一个自定义指令,并需要转义它生成的一些输出.

在内部,AngularJS sanitzer使用encodeEntities函数,但不暴露它.我知道我可以复制这个函数,但似乎应该有一个标准的方法来做到这一点.

---

用例:我有一个自定义指令,用于语言本地化.该指令使用数据文件中的键查找来查找语言文本.在某些情况下,允许此文本包含HTML,和/或该指令生成HTML以改进最终的可视格式.此外,该指令将Angular表达式作为参数,并将它们用作字符串中标记的替换.我需要对这些参数进行编码,因为它们可能不是HTML安全的.

例如,该指令被称为属性i18n-html='welcome_text_html,1+1,user.name'.该指令然后按照描述格式化字符串并用于element.html更新DOM节点.

Answer 1

这个答案是关于逃避,而不是清理 HTML.有两种方法:

1. 正如@maniekq所提到的,如果您可以使用DOM,请执行以下操作:

   element.text( scope.myValue );
   

2. 从这个答案中,您可以使用来自mustache.js的代码,例如创建一个角度过滤器:

   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

在 AngularJS 中，有两种方法可以进行 HTML 清理。第一个是使用 ngBindHtml 指令，第二个是使用 $sanitize 服务。

function MyCtrl ( $scope, $sanitize ) {
  $scope.rawHtml = "<div><script></script></div>";
  $scope.sanitizedHmtl = $sanitize( $scope.rawHtml );
}

那么这两者在功能上是等价的：

<div ng-bind-html="rawHtml"></div>
<div ng-bind-html-unsafe="sanitizedHtml"></div>

如果在指令中使用，就像您的问题一样，您可以简单地插入经过清理的 HTML：

element.html( scope.sanitizedHtml );

但在大多数情况下，编写指令时，您可以将其放在模板中并使用 ngBindHtml，如上所述。但它适用于极端情况。