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实现简单的日期输入格式化控件
Mar 12 Javascript
Javascript显示和隐藏ul列表的方法
Jul 15 Javascript
深入理解MVC中的时间js格式化
May 19 Javascript
全面解析Bootstrap中nav、collapse的使用方法
May 22 Javascript
JS验证不重复验证码
Feb 10 Javascript
浅析JavaScript中的平稳退化(graceful degradation)
Jul 24 Javascript
vue二级路由设置方法
Feb 09 Javascript
浅谈Node.js 沙箱环境
May 15 Javascript
浅谈vue同一页面中拥有两个表单时,的验证问题
Sep 18 Javascript
JS使用数组实现的队列功能示例
Mar 04 Javascript
深入了解JavaScript代码覆盖
Jun 13 Javascript
vue-cli3项目升级到vue-cli4 的方法总结
Mar 19 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 模拟GMAIL,HOTMAIL(MSN),YAHOO,163,126邮箱登录的详细介绍
2013/06/18 PHP
smarty内部日期函数html_select_date()用法实例分析
2015/07/08 PHP
PHP Filter过滤器全面解析
2016/08/09 PHP
Laravel重定向,a链接跳转,控制器跳转示例
2019/10/22 PHP
新闻内页-JS分页
2006/06/07 Javascript
Ext 表单布局实例代码
2009/04/30 Javascript
js调用AJAX时Get和post的乱码解决方法
2013/06/04 Javascript
showModalDialog在谷歌浏览器下会返回Null的解决方法
2013/11/27 Javascript
分享Javascript中最常用的55个经典小技巧
2013/11/29 Javascript
js和jquery使按钮失效为不可用状态的方法
2014/01/26 Javascript
button没写type=button会导致点击时提交
2014/03/06 Javascript
jQuery ajax调用WCF服务实例
2014/07/16 Javascript
JS实现网页滚动条感应鼠标变色的方法
2015/02/26 Javascript
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
2016/06/21 Javascript
JS制作适用于手机和电脑的通知信息效果
2016/10/28 Javascript
js代码延迟一定时间后执行一个函数的实例
2017/02/15 Javascript
SpringMVC+bootstrap table实例详解
2017/06/02 Javascript
jQuery进阶实践之利用最优雅的方式如何写ajax请求
2017/12/20 jQuery
vue 修改 data 数据问题并实时显示的方法
2018/08/27 Javascript
详解Vue.js在页面加载时执行某个方法
2018/11/20 Javascript
js简单的分页器插件代码实例
2019/09/11 Javascript
vue实现购物车结算功能
2020/06/18 Javascript
Vue使用CDN引用项目组件,减少项目体积的步骤
2020/10/30 Javascript
vue 使用localstorage实现面包屑的操作
2020/11/16 Javascript
[00:44]华丽开场!DOTA2勇士令状带来全新对阵画面
2019/05/15 DOTA
[56:13]DOTA2-DPC中国联赛定级赛 LBZS vs Phoenix BO3第一场 1月10日
2021/03/11 DOTA
Python序列之list和tuple常用方法以及注意事项
2015/01/09 Python
python二分查找算法的递归实现方法
2016/05/12 Python
python绘制简单折线图代码示例
2017/12/19 Python
python调用百度语音识别实现大音频文件语音识别功能
2018/08/30 Python
三年级小学生评语
2014/04/22 职场文书
2014离婚协议书范文
2014/09/10 职场文书
2014副局长群众路线对照检查材料思想汇报
2014/09/22 职场文书
教师党的群众路线教育实践活动个人整改措施
2014/11/04 职场文书
前台接待岗位职责
2015/02/03 职场文书
辩护词范文大全
2015/05/21 职场文书