双向数据绑定时如何在页面输出渲染后的Html标签而不是源码

简介: 双向数据绑定时如何在页面输出渲染后的Html标签而不是源码

angularJS在进行数据绑定时默认是会以文本的形式输出,也就是对你数据中的html标签不进行转义照单全收,这样提高了安全性,防止了html标签中的注入攻击,但有些时候还是需要的,特别是从数据库读取带格式的文本时,无法正常的显示在页面中。

而要对html进行转义,则要在数据绑定的html标签中使用ng-bind-html属性。

页面:

<div id="details" style="display:none">
        <h2 class="text-center">{{Detailsnews.Title}}</h2>
        <p ng-bind-html="Detailsnews.Content | trustHtml"></p>
</div>

Angular:

app.filter('trustHtml', function ($sce) {
        return function (input) {
            return $sce.trustAsHtml(input);
        }})


相关文章
|
15天前
|
移动开发 搜索推荐 HTML5
如何使用HTML5的语义化标签来提高网站的可访问性?
【4月更文挑战第1天】如何使用HTML5的语义化标签来提高网站的可访问性?
22 1
|
16天前
使用HTML编写注册页面
使用HTML编写注册页面
10 1
|
2天前
错误或拦截页面的html代码
错误或拦截页面的html代码
3 0
错误或拦截页面的html代码
|
3天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
13 1
|
11天前
|
移动开发 HTML5
唯美首页纯静态html源码
唯美首页纯静态html5引导页源码,格子化win8风格官方引导页面源码
10 0
唯美首页纯静态html源码
|
11天前
漂亮的个人主页HTML源码
漂亮的个人主页HTML源码
13 0
漂亮的个人主页HTML源码
|
12天前
一款简约单双页版HTML源码
开源的单页个人主页纯静态源码、目前有两个主页版本:master单页版、double双页版、非常漂亮的单页HTML源码
11 1
一款简约单双页版HTML源码
|
15天前
|
移动开发 搜索推荐 开发者
HTML5中的语义化标签有哪些?
【4月更文挑战第1天】HTML5中的语义化标签有哪些?
9 0
HTML5中的语义化标签有哪些?
|
17天前
|
存储 移动开发 前端开发
html的常用标签
【4月更文挑战第1天】html的常用标签
19 4
|
27天前
|
前端开发 容器 内存技术
使用CSS3画出一个叮当猫HTML源码
本文教程介绍了如何使用CSS3绘制叮当猫,通过HTML结构和CSS样式逐步构建叮当猫的各个部位,如头部、脸部、脖子、身体、手脚等。代码示例展示了如何利用渐变、边框、阴影和定位技巧实现三维效果和细节特征。此外,还添加了眼珠的动画效果,让叮当猫的眼睛能够转动。整个过程适合对CSS3感兴趣的读者参考学习,以提升动态图形创作技能。
16 0
使用CSS3画出一个叮当猫HTML源码