angular绑定html格式数据

    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格式数据'),这个方法会返回一段测试过的代码,并且保留了原有的属性和事件。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • AngularJS是什么?AngularJs(后面就简称ng了)是一个用于设计动态web应用的结构框架。首先,它是...
    200813阅读 1,673评论 0 3
  • https://segmentfault.com/a/1190000003712937 我们以下使用的angula...
    丁小时候阅读 750评论 0 1
  • AngularJS AngularJS概述 介绍 简称:ng Angular是一个MVC框架 其他前端框架: Vu...
    我爱开发阅读 2,349评论 0 8
  • 文档目录 一、体验概述 二、产品概述 三、市场需求 四、市场现状 五、产品详情 1、产品结构图 3、产...
    JohnWick阅读 1,445评论 0 0
  • 未来会是精神商业时代。 精神商业时代对应的是功能商业时代。 功能商业是指,企业把产品和服务的功能层面放在首位,不断...
    李昌红阅读 813评论 4 0