angularJs中添加过滤器显示Html代码

柔情只为你懂 2022-05-17 06:37 172阅读 0赞

我们测试后发现高亮显示的html代码原样输出，这是angularJS为了防止html攻击采取的安全机制。我们如何在页面上显示html的结果呢？我们会用到$sce服务的trustAsHtml方法来实现转换。

因为这个功能具有一定通用性，我们可以通过angularJS的过滤器来简化开发，这样只写一次，调用的时候就非常方便了，看代码：

1.  修改base.js

<table style="width:426.1pt;"> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;width:426.1pt;"> <p><span style="color:#1e1c11;"><span style="color:#7f7f7f;">// 定义模块:</span></span></p> <p><span style="color:#1e1c11;"><strong><span style="color:#7f7f7f;"><strong>var</strong></span></strong><span style="color:#7f7f7f;">&nbsp;app = angular.module("pinyougou",[]);</span></span></p> <p><span style="color:#1e1c11;"><span style="color:#3f7f5f;">/*$</span><u><span style="color:#3f7f5f;"><u>sce</u></span></u><span style="color:#3f7f5f;">服务写成过滤器*/</span></span></p> <p><span style="color:#1e1c11;"><span style="color:#000000;">app.filter(</span><span style="color:#2a00ff;">'trustHtml'</span><span style="color:#000000;">,[</span><span style="color:#2a00ff;">'$sce'</span><span style="color:#000000;">,</span><strong><span style="color:#7f0055;"><strong>function</strong></span></strong><span style="color:#000000;">($sce){ </span></span></p> <p><span style="color:#1e1c11;">&nbsp;&nbsp;&nbsp;&nbsp;<strong><span style="color:#7f0055;"><strong>return</strong></span></strong>&nbsp;<strong><span style="color:#7f0055;"><strong>function</strong></span></strong><span style="color:#000000;">(data){ </span></span></p> <p><span style="color:#1e1c11;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong><span style="color:#7f0055;"><strong>return</strong></span></strong><span style="color:#000000;">&nbsp;$sce.trustAsHtml(data);</span></span></p> <p><span style="color:#1e1c11;"><span style="color:#000000;">&nbsp;&nbsp;&nbsp;&nbsp;}</span></span></p> <p><span style="color:#1e1c11;"><span style="color:#000000;">}]);</span></span></p> </td> 
  </tr> 
 </tbody> 
</table>

1.  使用过滤器

ng-bind-html指令用于显示html内容

竖线 |用于调用过滤器

<table style="width:426.1pt;"> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;width:426.1pt;"> <p><span style="color:#1e1c11;"><span style="color:#008080;">&lt;</span><span style="color:#3f7f7f;">div</span>&nbsp;<span style="color:#7f007f;">class</span><span style="color:#000000;">=</span><em><span style="color:#2a00ff;"><em>"attr"</em></span></em>&nbsp;<u><span style="color:#7f007f;"><u>ng-bind-html</u></span></u><span style="color:#000000;">=</span><em><span style="color:#2a00ff;"><em>"item.title | trustHtml"</em></span></em><span style="color:#008080;">&gt;&lt;/</span><span style="color:#3f7f7f;">div</span><span style="color:#008080;">&gt;</span></span></p> </td> 
  </tr> 
 </tbody> 
</table>

*|**就是竖线，看起来有点斜是因为字体原因。*

发表评论取消回复

表情：

评论列表（有 0 条评论，172人围观）

还没有评论，来说两句吧...

相关阅读

相关 angular中自定义过滤器显示html代码

我们会用到$sce服务的trustAsHtml方法来实现转换。因为这个功能具有一定通用性，我们可以通过angularJS的过滤器来简化开发，这样只写一次，调用的时候就非常方

绝地灬酷狼/ 2022年12月23日 15:26/ 0 赞/ 138 阅读

相关 angularjs自动生成html,Angularjs 实现动态添加控件功能

实现下面这样的需求：点击增加一块数据盘，会出现数据盘选项。 (1)最开始，想到原生JavaScript，jQuery (appendChild()等方法结合Angular

╰半夏微凉°/ 2022年10月06日 09:47/ 0 赞/ 184 阅读

相关 angularjs过滤器

<!DOCTYPE html> <html ng-app="app"> <head> <meta charset="utf-8">

阳光穿透心脏的1/2处/ 2022年07月14日 22:53/ 0 赞/ 166 阅读

相关 angularjs中的常见过滤器

项目中使用了angularjs框架，使用到了里面自带过滤器，随便就总结了一下angularjs中常见的过滤器。一、什么是过滤器？过滤器用来格式化需要展示给用户的数据。

缺乏、安全感/ 2022年07月14日 02:19/ 0 赞/ 169 阅读

相关 AngularJs过滤器

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

「爱情、让人受尽委屈。」/ 2022年07月12日 07:07/ 0 赞/ 200 阅读

相关 angularJs中添加过滤器显示Html代码

我们测试后发现高亮显示的html代码原样输出，这是angularJS为了防止html攻击采取的安全机制。我们如何在页面上显示html的结果呢？我们会用到$sce服务的trust

柔情只为你懂/ 2022年05月17日 06:37/ 0 赞/ 173 阅读

相关 AngularJS过滤器filter

　　在开发中，经常会遇到这样的场景：　　如用户的性别分为“男”和“女”，在数据库中保存的值为1和0，用户在查看自己的性别时后端返回的值自然是1或0，前端要转换为“男”或“女

ゝ一纸荒年。/ 2022年04月06日 10:48/ 0 赞/ 241 阅读

相关 AngularJS中页面呈现html代码段

如何在页面呈现一段html代码段呢？在textarea中我们这样写： <textarea name="" id="" cols="30" rows=""

拼搏现实的明天。/ 2021年11月02日 13:00/ 0 赞/ 306 阅读

相关 html中如何直接显示html代码

百度了很多中做法，感觉很多都没有测试再胡说，特总结一下。百度说的`<code>`和`<pre>`标签，我的测试结果如下： 1.`<code>` <code>

淩亂°似流年/ 2021年10月19日 05:24/ 0 赞/ 529 阅读

相关 AngularJS过滤器以及自定义过滤器

过滤器是用来更改修改数据，并且可以在表达式或使用管道符指令将其归入。以下是常用的过滤器的列表。一.AngularJS的filter过滤器向表达式添加过滤器：可以通过

Bertha 。/ 2021年09月14日 06:54/ 0 赞/ 471 阅读