angularJS的ng-bind-html指令详解


本文摘自PHP中文网,作者php中世界最好的语言,侵删。

这次给大家带来angularJS的ng-bind-html指令详解,使用angularJS的ng-bind-html指令的注意事项有哪些,下面就是实战案例,一起来看一下。

angular js的强大之处之一就是他的数据双向绑定这个功能,我们会常常用到的两个东西就是ng-bind和针对form的ng-model。但在我们的项目当中会遇到这样的情况,后台返回的数据中带有各种各样的html标签。如:

1

$scope.text = “hello,<br><b> 这是一个例子</b>”

我们用ng-bind-html这样的指令来绑定,结果却不是我们想要的。是这样的:
hello,这是一个例子(我们给文字设置的b标签样式丢失了)

调试了半天,最后锁定问题并解决问题。,不过辛苦还是值得的,毕竟为了弄明白这一点又学习了更多代码。

原因是这样的:

angularJS在进行数据绑定时默认是会以文本的形式输出,也就是对你数据中的html标签不进行转义照单全收,这样提高了安全性,防止了html标签中的注入攻击。但是如果我们的应用场景,是类似于文章详情页,从数据库读取带格式的文本时,无法正常的显示在页面中。如下:

1

$scope.htmlStr = '<p style="color:red;font-size=18px;"></p>';

这个时候我们必须要使用$sce这个服务来解决我们的问题。所谓sce即“Strict Contextual Escaping”的缩写。翻译成中文就是“严格的上下文模式”也可以理解为安全绑定吧。该方法将值转换为特权所接受并能安全地使用“ng-bind-html”来绑定。
来看看如何使用吧:

把它封装成一个过滤器就可以在模板上随时调用了

阅读剩余部分

相关阅读 >>

javascript怎么判断是否ie浏览器

javascript输出语句怎么打

javascript如何处理并行请求?四种方式浅析

popper.js怎么下载

javascript怎么实现日期转换字符串

深入浅析 promise 比 settimeout() 快的原因

怎样使用js获取函数参数名称

理解并优化javascript代码

javascript怎么实现鼠标追随

javascript怎么将值转换成数字类型

更多相关阅读请进入《ng-bind-html》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...