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 相关文章推荐
JavaScript 学习小结(适合新手参考)
Jul 30 Javascript
javascript Array.sort() 跨浏览器下需要考虑的问题
Dec 07 Javascript
JavaScript prototype属性深入介绍
Nov 27 Javascript
jQuery对象和Javascript对象之间转换的实例代码
Mar 20 Javascript
js滑动提示效果代码分享
Mar 10 Javascript
JavaScript判断数字是否为质数的方法汇总
Jun 02 Javascript
原生js实现鼠标跟随效果
Feb 28 Javascript
解决LayUI表单获取不到data的问题
Aug 20 Javascript
基于node简单实现RSA加解密的方法步骤
Mar 21 Javascript
使用Bootstrap做一个朝代历史表
Dec 10 Javascript
vue从后台渲染文章列表以及根据id跳转文章详情详解
Dec 14 Vue.js
JavaScript 中for/of,for/in 的详细介绍
Nov 17 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简单的伪原创程序,配合商城采集用的
2010/10/12 PHP
php curl登陆qq后获取用户信息时证书错误
2015/02/03 PHP
PHP生成指定范围内的N个不重复的随机数
2019/03/18 PHP
PHP 实现 JSON 数据的编码和解码操作详解
2020/04/22 PHP
JS 统计时间
2021/03/09 Javascript
JavaScript面对国际化编程时的一些建议
2015/06/24 Javascript
javascript密码强度校验代码(两种方法)
2015/08/10 Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
2015/08/21 Javascript
js实现跨域的几种方法汇总(图片ping、JSONP和CORS)
2015/10/25 Javascript
jQuery简单实现点击文本框复制内容到剪贴板上的方法
2016/08/01 Javascript
Vuejs第十二篇之动态组件全面解析
2016/09/09 Javascript
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
2017/01/19 Javascript
深入学习 JavaScript中的函数调用
2017/03/23 Javascript
vue动态生成dom并且自动绑定事件
2017/04/19 Javascript
jQuery实现的中英文切换功能示例
2019/01/11 jQuery
详解mpvue中小程序自定义导航组件开发指南
2019/02/11 Javascript
es6中使用map简化复杂条件判断操作实例详解
2020/02/19 Javascript
Vue为什么要谨慎使用$attrs与$listeners
2020/08/27 Javascript
Python新手在作用域方面经常容易碰到的问题
2015/04/03 Python
pygame学习笔记(2):画点的三种方法和动画实例
2015/04/15 Python
深入解析Python中的变量和赋值运算符
2015/10/12 Python
基于anaconda下强大的conda命令介绍
2018/06/11 Python
python正则过滤字母、中文、数字及特殊字符方法详解
2020/02/11 Python
Python request操作步骤及代码实例
2020/04/13 Python
Python xml、字典、json、类四种数据类型如何实现互相转换
2020/05/27 Python
汽车电子与维修专业大学生求职信
2013/09/28 职场文书
银行办理业务介绍信
2014/01/18 职场文书
品质主管岗位职责
2014/03/16 职场文书
对教师的评语
2014/04/28 职场文书
加强干部作风建设整改方案
2014/10/24 职场文书
离职报告范文
2014/11/04 职场文书
2016年元旦致辞
2015/08/01 职场文书
2016年小学生寒假家长评语
2015/10/10 职场文书
Python3接口性能测试实例代码
2021/06/20 Python
springboot用户数据修改的详细实现
2022/04/06 Java/Android
Python Flask实现进度条
2022/05/11 Python