AngularJS通过$sce输出html的方法


Posted in Javascript onSeptember 22, 2016

【问题描述】

AngularJS的强大之处之一就是他的数据双向绑定功能----->ng-bind和针对form的ng-model

但在我们的项目当中会遇到这样的情况,后台返回的数据中带有各种各样的html标签

AngularJS输出html的时候,浏览器并不解析这些html标签

通过api,发现通过指令 ng-bind-html来实现html的输出。

<div class="col-md-12 ng-binding" ng-bind-html="item.content ">

但是并不起作用,浏览器中显示的还是html代码。

【解决办法】

后来发现还需要通过通过$sce服务来实现html的展示。

angular.module("list",[]).controller("BlogListCtrl", BlogListCtrl).filter( 
 'to_trusted', ['$sce', function ($sce) { 
  return function (text) { 
   return $sce.trustAsHtml(text); 
  } 
 }] 
)

这里通过$sce构建一个过滤器来对输出的html进行过滤

<div class="col-md-12 ng-binding" ng-bind-html="item.content|to_trusted ">

这样就可以通过AngularJS正常的输出html标签,并且被浏览器解析了

【总结】

以上就是这篇文章的全部内容了,希望这篇文章的内容对大家的学习或者工作带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)
Dec 20 Javascript
通过js动态操作table(新增,删除相关列信息)
May 23 Javascript
jquery插件制作 图片走廊 gallery
Aug 17 Javascript
jquery打开直接跳到网页最下面、最低端实现代码
Apr 22 Javascript
JavaScript实现重置表单(reset)的方法
Apr 02 Javascript
js正则表达式验证邮件地址
Nov 12 Javascript
IE和Firefox之间在JavaScript语法上的差异
Apr 22 Javascript
基于JavaScript实现轮播图代码
Jul 14 Javascript
javascript实现循环广告条效果
Dec 12 Javascript
微信小程序支付前端源码
Aug 29 Javascript
微信小程序实现简易table表格
Jun 19 Javascript
jQuery中getJSON跨域原理的深入讲解
Sep 02 jQuery
JavaScript 随机验证码的生成实例代码
Sep 22 #Javascript
D3.js实现雷达图的方法详解
Sep 22 #Javascript
javascript函数中的3个高级技巧
Sep 22 #Javascript
JavaScript省市区三级联动菜单效果
Sep 21 #Javascript
Angular2 环境配置详细介绍
Sep 21 #Javascript
JS实现鼠标滑过显示边框的菜单效果
Sep 21 #Javascript
JS 动态判断PC和手机浏览器实现代码
Sep 21 #Javascript
You might like
dedecms中常见问题修改方法总结
2007/03/21 PHP
php生成数字字母的验证码图片
2015/07/14 PHP
PHP使用星号替代用户名手机和邮箱的实现代码
2018/02/07 PHP
javascript显示选择目录对话框的代码
2008/11/10 Javascript
javascript arguments 传递给函数的隐含参数
2009/08/21 Javascript
js数组Array sort方法使用深入分析
2013/02/21 Javascript
js jq 单击和双击区分示例介绍
2013/11/05 Javascript
Node.js插件的正确编写方式
2014/08/03 Javascript
AngularJS基础学习笔记之控制器
2015/05/10 Javascript
js实现人才网站职位选择功能的方法
2015/08/14 Javascript
jQuery的实例及必知重要的jQuery选择器详解
2016/05/20 Javascript
JavaScript和jQuery制作光棒效果
2017/02/24 Javascript
mac下的nodejs环境安装的步骤
2017/05/24 NodeJs
webpack4+Vue搭建自己的Vue-cli项目过程分享
2018/08/29 Javascript
vue+axios实现文件下载及vue中使用axios的实例
2018/09/21 Javascript
微信小程序实现日历功能
2018/11/27 Javascript
javascript实现小型区块链功能
2019/04/03 Javascript
使用Vue开发自己的Chrome扩展程序过程详解
2019/06/21 Javascript
vue下的@change事件的实现
2019/10/25 Javascript
封装一下vue中的axios示例代码详解
2020/02/16 Javascript
python批量同步web服务器代码核心程序
2014/09/01 Python
在Python中使用sort()方法进行排序的简单教程
2015/05/21 Python
python中类和实例如何绑定属性与方法示例详解
2017/08/18 Python
python opencv 图像尺寸变换方法
2018/04/02 Python
通过python实现随机交换礼物程序详解
2019/07/10 Python
pycharm无法安装第三方库的问题及解决方法以scrapy为例(图解)
2020/05/09 Python
Django模板获取field的verbose_name实例
2020/05/19 Python
python opencv图像处理(素描、怀旧、光照、流年、滤镜 原理及实现)
2020/12/10 Python
英国经典球衣网站:Classic Football Shirts
2017/05/20 全球购物
玉兰油美国官网:OLAY美国
2018/10/25 全球购物
《宋庆龄故居的樟树》教学反思
2014/04/07 职场文书
国庆65周年演讲稿:回首往昔,展望未来
2014/09/21 职场文书
2014年化验室工作总结
2014/11/21 职场文书
小班下学期幼儿评语
2014/12/30 职场文书
幼儿园2016年圣诞活动总结
2016/03/31 职场文书
新店开业策划方案怎么书写?
2019/07/05 职场文书