angularjs中ng-bind-html的用法总结


Posted in Javascript onMay 23, 2017

本篇主要讲解angular中的$sanitize这个服务.此服务依赖于ngSanitize模块.(这个模块需要加载angular-sanitize.js插件)

要学习这个服务,先要了解另一个指令: ng-bing-html.

顾名思义,ng-bind-html和ng-bind的区别就是,ng-bind把值作为字符串,和元素的内容进行绑定,但是ng-bind-html把值作为html,和元素的html进行绑定.相当于jq里面的.text()和.html().

但是,出于安全考虑,如果我们直接使用ng-bind-html是会报错的,ng-bind-html后面的内容必须经过一定的处理.

处理的方式有两种,一种是使用$sce服务,另一种就是使用$sanitize服务.$sce服务怎么用,在以后的文章中会独立讲解,这篇主要讲解$sanitize服务.

$sanitize会根绝一个白名单来净化html标签.这样,不安全的内容就不会被返回. 白名单是根据$compileProvider的aHrefSanitizationWhitelist和imgSrcSanitizationWhitelist函数得到的.

看一个栗子:

html:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
 <title></title>
 <meta charset="utf-8">
 <script src="../angular-1.3.2.js"></script>
 <script src="angular-sanitize.min.js"></script>
 <script src="script.js"></script>
 <link type="text/css" href="../bootstrap.css" rel="external nofollow" rel="stylesheet" />
</head>
<body>
<div class="container" ng-controller="ctrl"> 
<div ng-bind-html="trustHtml"></div>
</div> 

</body> 

</html>

js:

var app =angular.module(‘myApp‘,[‘ngSanitize‘]);
app.controller(‘ctrl‘,function($scope,$sce){
  $scope.myHtml = ‘<p style="color:blue">an html\n‘ +
  ‘<em onclick="this.textContent=\‘code_bunny\‘">click here</em>\n‘ +
  ‘snippet</p>‘;
  $scope.trustHtml = $sce.trustAsHtml($scope.myHtml)
});

这样,在div内就能加载上带有html标签的内容,标签的属性以及绑定在元素上的事件都会被保留。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 表单进行客户端验证demo
Aug 24 Javascript
javascript 触发事件列表 比较不错
Sep 03 Javascript
javascript与webservice的通信实现代码
Dec 25 Javascript
jquery创建一个新的节点对象(自定义结构/内容)的好方法
Jan 21 Javascript
javascript单引号和双引号的区别和处理
May 14 Javascript
微信小程序 基础组件与导航组件详细介绍
Feb 21 Javascript
以BootStrap Tab为例写一个前端组件
Jul 25 Javascript
Angular4实现鼠标悬停3d倾斜效果
Oct 25 Javascript
js实现控制文件拖拽并获取拖拽内容功能
Feb 17 Javascript
js如何获取图片url的Blob值并预览示例代码
Mar 07 Javascript
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
Sep 01 Javascript
vue如何使用async、await实现同步请求
Dec 09 Javascript
vue.js实现价格格式化的方法
May 23 #Javascript
js编写选项卡效果
May 23 #Javascript
jQuery日期范围选择器附源码下载
May 23 #jQuery
详解JavaScript数组过滤相同元素的5种方法
May 23 #Javascript
强大的 Angular 表单验证功能详细介绍
May 23 #Javascript
微信小程序 侧滑删除(左滑删除)
May 23 #Javascript
最常用的jQuery表单验证(简单)
May 23 #jQuery
You might like
php和vue配合使用技巧和方法
2019/05/09 PHP
javascript实现的距离现在多长时间后的一个格式化的日期
2009/10/29 Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
2012/10/12 Javascript
Node.js生成HttpStatusCode辅助类发布到npm
2013/04/09 Javascript
javascript 实现 秒杀,团购 倒计时展示的记录 分享
2013/07/12 Javascript
js实现jquery的offset()方法实例
2015/01/10 Javascript
jquery实现Li滚动时滚动条自动添加样式的方法
2015/08/10 Javascript
jQuery绑定事件on()与弹窗的简要概述
2016/04/27 Javascript
js根据手机客户端浏览器类型,判断跳转官网/手机网站多个实例代码
2016/04/30 Javascript
node.js实现快速截图
2016/08/27 Javascript
js实现按钮控制带有停顿效果的图片滚动
2016/08/30 Javascript
js数组去重的hash方法
2016/12/22 Javascript
jQuery实现简单飞机大战
2020/07/05 jQuery
[02:32]“虐狗”镜头慎点 2016国际邀请赛中国区预选赛现场玩家采访
2016/06/28 DOTA
python实现随机密码字典生成器示例
2014/04/09 Python
Python用Bottle轻量级框架进行Web开发
2016/06/08 Python
详细介绍Python的鸭子类型
2016/09/12 Python
如何更优雅地写python代码
2019/07/02 Python
Pycharm连接远程服务器并实现远程调试的实现
2019/08/02 Python
python迭代器常见用法实例分析
2019/11/22 Python
在python中利用dict转json按输入顺序输出内容方式
2020/02/27 Python
在Keras中利用np.random.shuffle()打乱数据集实例
2020/06/15 Python
MoviePy简介及Python视频剪辑自动化
2020/12/18 Python
HTML5 自动聚焦(autofocus)属性使用介绍
2013/08/07 HTML / CSS
香港万宁官方海外旗舰店:香港健与美连锁店
2018/09/27 全球购物
乌克兰的第一家手表店:Deka
2020/03/05 全球购物
神路信息Java面试题目
2013/03/31 面试题
音乐专业应届生教师求职信
2013/11/04 职场文书
初中生物教学反思
2014/01/10 职场文书
文明青少年标兵事迹材料
2014/01/28 职场文书
教师党员整改措施
2014/10/24 职场文书
有限责任公司股东合作协议书范本
2014/10/30 职场文书
研究生毕业论文导师评语
2014/12/31 职场文书
《桂花雨》教学反思
2016/02/19 职场文书
详解Html5项目适配系统深色模式方案总结
2021/04/14 HTML / CSS
Python实现简单的猜单词
2021/06/15 Python