angularJS里的ng-bind-html的坑

情景:

一般我们写代码的时候需要渲染带html结构的字符串。

实现:

使用ng-bind-html可以实现。

ng-bind-html的坑:

ng-bind-html这个指令会在运行过滤掉一些不安全的标签来防止xxs攻击,提高安全性。所以会导致你写的字符串里的某些标签比如<button></button>,<input/>等不会显示出来。

解决办法:
  1. ng-bind-html指令是通过一个安全的方式将内容绑定到HTML元素上,该属性依赖于$sanitize,需要在项目中引入angular-sanitize.js文件,并在module定义时注入该服务ngSanitize。
  2. 通过ng-bind-html指令绑定html元素,为什么还需要$sce
    这是因为如果在angularjs中绑定的数据有html标签时,如上面的<input/>,会被angularjs认为是不安全的而自动过滤掉,为了保留这些标签就需要开启非安全模式,这是非常危险的。$sce是angularJS自带的安全处理模块,因此需要$sce.trustAsHtml()方法将数据内容以html的形式解析并返回。
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容