本文摘自PHP中文网，作者php中世界最好的语言，侵删。
这次给大家带来angularJS的ng-bind-html指令详解，使用angularJS的ng-bind-html指令的注意事项有哪些，下面就是实战案例，一起来看一下。angular js的强大之处之一就是他的数据双向绑定这个功能，我们会常常用到的两个东西就是ng-bind和针对form的ng-model。但在我们的项目当中会遇到这样的情况，后台返回的数据中带有各种各样的html标签。如：
1 |
|
我们用ng-bind-html这样的指令来绑定，结果却不是我们想要的。是这样的：
hello,这是一个例子（我们给文字设置的b标签样式丢失了）
调试了半天，最后锁定问题并解决问题。，不过辛苦还是值得的，毕竟为了弄明白这一点又学习了更多代码。
原因是这样的：
angularJS在进行数据绑定时默认是会以文本的形式输出，也就是对你数据中的html标签不进行转义照单全收，这样提高了安全性，防止了html标签中的注入攻击。但是如果我们的应用场景，是类似于文章详情页，从数据库读取带格式的文本时，无法正常的显示在页面中。如下：
1 |
|
这个时候我们必须要使用$sce这个服务来解决我们的问题。所谓sce即“Strict Contextual Escaping”的缩写。翻译成中文就是“严格的上下文模式”也可以理解为安全绑定吧。该方法将值转换为特权所接受并能安全地使用“ng-bind-html”来绑定。
来看看如何使用吧：
把它封装成一个过滤器就可以在模板上随时调用了
相关阅读 >>
更多相关阅读请进入《ng-bind-html》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
