角度：创建没有 html 转义的格式化过滤器答案

【问题标题】：angular: create formating filter without html-escaping角度：创建没有 html 转义的格式化过滤器
【发布时间】：2015-03-26 04:28:17
【问题描述】：

我想对某些字符串进行自动 html 格式化。例如，我想为带有下划线前缀的字符自动下标。
所以像“U_1 + U_2 = U_3”这样的字符串应格式化为 U₁ + U₂ = U₃

这看起来是一个完美的过滤器工作。我尝试了以下方法：

angular.module('myApp.filters', []).
  filter('convert_subscripts', [ function(){
      return function(text){
          return text.replace(/_([\w]+)/, '<sub>$1</sub>', 'g');
      };
   }])

在我看来：

<p>{{content.text | convert_subscripts }}</p>

但这会转义 HTML，因此用户会看到“子”标签，而不是格式良好的下标。

如何实现格式化功能，使 html-Tags 不被转义？

（为了安全起见，应该对 content.text 本身进行转义，但添加的下标标签不是。我使用 angular 1.2）

【问题讨论】：

试试这个：<p ng-bind-html="content.text | convert_subscripts"></p>
@codeHater：这给了我一个运行时错误：错误：[$sce:unsafe] Attempting to use an unsafe value in a safe context。 errors.angularjs.org/1.2.0/$sce/unsafe 我认为 angular 1.2 有一些变化。
哦，对了。您需要将$sce 服务注入您的控制器并调用$sce.trustAsHtml 方法。看看这里：stackoverflow.com/questions/19625850/…
是的，这有效（我在过滤器定义中注入了 $ice）。

标签： javascript angularjs html-escape

【解决方案1】：

I think this article should help. 您可以通过两种方式呈现 html

$sce.trustAsHtml('text')

或者您可以为此目的创建一个过滤器，例如

app.filter('filterName',function($sce){
    return function(text){
             $sce.trustAsHtml(text);
           }
    });

在您的情况下，您应该使用方法 1

function($sce){
      return function(text){
          return $sce.trustAsHtml(text.replace(/_([\w]+)/, '<sub>$1</sub>', 'g'));
      };

【讨论】：