angularJS在进行数据绑定时默认是会以文本的形式输出,也就是对你数据中的html标签不进行转义照单全收,这样提高了安全性,防止了html标签中的注入攻击,但有些时候还是需要的,特别是从数据库读取带格式的文本时,无法正常的显示在页面中。
要想angular在数据绑定后以html形式解析,需要用到ng-bind-html。如果在ng-bind-html处不经处理直接赋值,会报错Error: [$sce:unsafe] Attempting to use an unsafe value in a safe context。告诉我们试图在一个安全的环境中使用一个不安全的值。这里我们绑定数据时需要经过处理。
ng-bind-html可以通过两种方式绑定数据:
1.第一种是依赖于ngSanitize模块(需要链入angular-sanitize.min.js),这样在使用ng-bind-html时,数据中的标签就自动会被当成html来解析了,此时ng-bind-html对比于ng-bind就相当于jQuery中 html() 对应于 text()。但此方法会丢失html中的样式和事件。
2.第二种是通过内置的$sce服务,利用$sce.trustAsHtml('要传入的html格式数据'),这个方法会返回一段测试过的代码,并且保留了原有的属性和事件。