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 相关文章推荐
一些有关检查数据的JS代码
Sep 07 Javascript
javascript之更有效率的字符串替换
Aug 02 Javascript
js 自定义的联动下拉框
Feb 07 Javascript
jquery、js调用iframe父窗口与子窗口元素的方法整理
Jul 31 Javascript
JavaScript类型检测之typeof 和 instanceof 的缺陷与优化
Jan 13 Javascript
详解vuelidate 对于vueJs2.0的验证解决方案
Mar 09 Javascript
Axios学习笔记之使用方法教程
Jul 21 Javascript
fetch 使用及如何接收JS传值
Nov 11 Javascript
微信小程序实现image组件图片自适应宽度比例显示的方法
Jan 16 Javascript
小程序实现抽奖动画
Apr 16 Javascript
微信小程序实现弹框效果
May 26 Javascript
Vue实现小购物车功能
Dec 21 Vue.js
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处理SQL脚本文件导入到MySQL的代码实例
2014/03/17 PHP
修改destoon会员公司的伪静态中的com目录的方法
2014/08/21 PHP
PHP中new static()与new self()的区别异同分析
2014/08/22 PHP
php之curl设置超时实例
2014/11/03 PHP
php中preg_match的isU代表什么意思
2015/10/01 PHP
PHP使用file_get_content设置头信息的方法
2016/02/14 PHP
详解PHP防止盗链防止迅雷下载的方法
2017/04/26 PHP
javascript 单选框,多选框美化代码
2008/08/01 Javascript
二级域名或跨域共享Cookies的实现方法
2008/08/07 Javascript
javascript的函数、创建对象、封装、属性和方法、继承
2011/03/10 Javascript
从URL中提取参数与将对象转换为URL查询参数的实现代码
2012/01/12 Javascript
Jquery实现视频播放页面的关灯开灯效果
2013/05/27 Javascript
一个js导致的jquery失效问题的解决方法
2013/11/27 Javascript
js分页代码分享
2014/04/28 Javascript
jQuery表格排序组件-tablesorter使用示例
2014/05/26 Javascript
javascript中setTimeout和setInterval的unref()和ref()用法示例
2014/11/26 Javascript
js采用concat和sort将N个数组拼接起来的方法
2016/01/21 Javascript
JavaScript中数组的22种方法必学(推荐)
2016/07/20 Javascript
获取JavaScript异步函数的返回值
2016/12/21 Javascript
使用jQuery卸载全部事件的思路详解
2017/04/03 jQuery
AngularJS 验证码60秒倒计时功能的实现
2017/06/05 Javascript
JavaScript中运算符规则和隐式类型转换示例详解
2017/09/06 Javascript
利用jsonp与代理服务器方案解决跨域问题
2017/09/14 Javascript
JavaScript数组去重算法实例小结
2018/05/07 Javascript
Vue页面骨架屏注入方法
2018/05/13 Javascript
element-ui tree结构实现增删改自定义功能代码
2020/08/31 Javascript
用Python的pandas框架操作Excel文件中的数据教程
2015/03/31 Python
python获取网页中所有图片并筛选指定分辨率的方法
2018/03/31 Python
Django rstful登陆认证并检查session是否过期代码实例
2019/08/13 Python
HTML5 预加载让页面得以快速呈现
2013/08/13 HTML / CSS
法国设计制造的扫帚和刷子:Andrée Jardin
2018/12/06 全球购物
IFCHIC台湾:欧美国际设计师品牌
2019/05/18 全球购物
解释一下ruby中的特殊方法与特殊类
2013/02/26 面试题
执行力心得体会
2013/12/31 职场文书
护校行动方案
2014/05/31 职场文书
2015秋季开学典礼演讲稿
2015/07/16 职场文书