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 相关文章推荐
IE不出现Flash激活框的小发现的js实现方法
Sep 07 Javascript
autoIMG 基于jquery的图片自适应插件代码
Mar 12 Javascript
在JavaScript应用中实现延迟加载的方法
Jun 25 Javascript
jQuery实现图片左右滚动特效
Apr 20 Javascript
详解JavaScript中this关键字的用法
May 26 Javascript
Angularjs修改密码的实例代码
May 26 Javascript
详解vue填坑之解决部分浏览器不支持pushState方法
Jul 12 Javascript
JavaScript设计模式之原型模式分析【ES5与ES6】
Jul 26 Javascript
深入浅析javascript函数中with
Oct 28 Javascript
小程序如何获取多个formId实现详解
Sep 20 Javascript
JS立即执行的匿名函数用法分析
Nov 04 Javascript
javascript的var与let,const之间的区别详解
Feb 18 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生成略缩图代码
2012/07/16 PHP
php 升级到 5.3+ 后出现的一些错误,如 ereg(); ereg_replace(); 函数报错
2015/12/07 PHP
使用PHP+Redis实现延迟任务,实现自动取消订单功能
2019/11/21 PHP
JavaScript之编码规范 推荐
2012/05/23 Javascript
阻止事件(取消浏览器对事件的默认行为并阻止其传播)
2013/11/03 Javascript
整理的比较全的event对像在ie与firefox浏览器中的区别
2013/11/25 Javascript
2014 HTML5/CSS3热门动画特效TOP10
2014/12/07 Javascript
JavaScript如何自定义trim方法
2015/07/28 Javascript
js图片延迟加载(Lazyload)三种实现方式
2017/03/01 Javascript
js实现网页的两个input标签内的数值加减(示例代码)
2017/08/15 Javascript
详解vue-cli之webpack3构建全面提速优化
2017/12/25 Javascript
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
2018/05/10 Javascript
angularjs $http调用接口的方式详解
2018/08/13 Javascript
vue中npm包全局安装和局部安装过程
2019/09/03 Javascript
js的Object.assign用法示例分析
2020/03/05 Javascript
15分钟上手vue3.0(小结)
2020/05/20 Javascript
Node.js 深度调试方法解析
2020/07/28 Javascript
如何搜索查找并解决Django相关的问题
2014/06/30 Python
Python实现将n个点均匀地分布在球面上的方法
2015/03/12 Python
在Python 3中实现类型检查器的简单方法
2015/07/03 Python
python对象及面向对象技术详解
2016/07/19 Python
python 将print输出的内容保存到txt文件中
2018/07/17 Python
浅谈python脚本设置运行参数的方法
2018/12/03 Python
对matplotlib改变colorbar位置和方向的方法详解
2018/12/13 Python
python文件读写代码实例
2019/10/21 Python
Python面向对象封装操作案例详解
2019/12/31 Python
Django使用Celery加redis执行异步任务的实例内容
2020/02/20 Python
浅谈opencv自动光学检测、目标分割和检测(连通区域和findContours)
2020/06/04 Python
是否有自动比较结构的方法
2015/06/03 面试题
Python使用openpyxl复制整张sheet
2021/03/24 Python
师范学院毕业生求职信范文
2013/12/26 职场文书
学校教师读书活动总结
2014/07/08 职场文书
高一地理教学工作总结
2015/08/12 职场文书
python 常用的异步框架汇总整理
2021/06/18 Python
铁头也玩根德 YachtBoy YB-230......
2022/04/05 无线电
Nginx如何配置多个服务域名解析共用80端口详解
2022/09/23 Servers