深入理解AngularJS中的ng-bind-html指令


Posted in Javascript onMarch 27, 2017

前言

在为html标签绑定数据的时,如果绑定的内容是纯文本,你可以使用{{}}或者ng-bind。但在为html标签绑定带html标签的内容的时候,angularjs为了安全考虑,不会将其渲染成html,而是将其当做文本直接在页面上展示。

先来看一个例子

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title></title>
 <script src="js/angular.min.js"></script>
 <script>
 angular.module("myapp", []).controller("MyController", function ($scope) {
 $scope.content = "<h1>Hello world.</h1>";
 $scope.txt = "Hello txt world";
 });
 </script>
</head>
<body ng-app="myapp">
 <div ng-controller="MyController">
 {{content}}
 <div ng-bind="content"></div> 
 </div>
</body>
</html>

输出

深入理解AngularJS中的ng-bind-html指令

ng-bind-html指令

<div ng-bind-html="content"></div>

这时就会出现安全的错误,如图:

深入理解AngularJS中的ng-bind-html指令

但可以通过引入下面的模块,自动检测html的内容是否安全

<script src="http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular-sanitize.min.js"></script>

 <script>
 angular.module("myapp", ["ngSanitize"]).controller("MyController", function ($scope) {
 $scope.content = "<h1>Hello world.</h1>";
 $scope.txt = "Hello txt world";
 });
 </script>

这时刷新预览

深入理解AngularJS中的ng-bind-html指令

所以

ng-bind-html 指令是通一个安全的方式将内容绑定到 HTML 元素上。

当你想让 AngularJS 在你的应用中写入 HTML,你就需要去检测一些危险代码。通过在应用中引入 "angular-santize.js" 模块,使用 ngSanitize 函数来检测代码的安全性。 in your application you can do so by running the HTML code through the ngSanitize function.

另外一种处理方式

通过自定义过滤器,将带html标签的内容都当成安全的进行处理。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title></title>
 <script src="js/angular.min.js"></script>
 <!--<script src="http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular-sanitize.min.js"></script>-->
 <script>
 angular.module("myapp", []).controller("MyController", function ($scope) {
  $scope.content = "<h1>Hello world.</h1>";
  $scope.txt = "Hello txt world";
 }).filter("safeHtml", function ($sce) {
  return function (input) {
  //在这里可以对加载html渲染后进行特别处理。
  return $sce.trustAsHtml(input);
  };
 });
 </script>
</head>
<body ng-app="myapp">
 <div ng-controller="MyController">
 {{content}}
 <div ng-bind="content"></div> 
 <!--<div ng-bind-html="content"></div>-->
 <div ng-bind-html="content|safeHtml"></div>
 </div>
</body>
</html>

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
javascript 验证日期的函数
Mar 18 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
May 23 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
Sep 09 Javascript
JavaScript插件化开发教程 (一)
Jan 27 Javascript
jQuery使用contains过滤器实现精确匹配方法详解
Feb 25 Javascript
基于BootStrap栅格栏系统完成网站底部版权信息区
Dec 23 Javascript
jQuery实现获取隐藏div高度的方法示例
Feb 09 Javascript
详解vue slot插槽的使用方法
Jun 13 Javascript
关于Vue的路由权限管理的示例代码
Mar 06 Javascript
vue.js循环radio的实例
Nov 07 Javascript
微信小程序背景音乐开发详解
Dec 12 Javascript
nuxt 服务器渲染动态设置 title和seo关键字的操作
Nov 05 Javascript
vue2.0实战之基础入门(1)
Mar 27 #Javascript
jQuery中的deferred使用方法
Mar 27 #jQuery
Angular2利用组件与指令实现图片轮播组件
Mar 27 #Javascript
Vue 过渡实现轮播图效果
Mar 27 #Javascript
AngularJS2中一种button切换效果的实现方法(二)
Mar 27 #Javascript
使用AngularJS2中的指令实现按钮的切换效果
Mar 27 #Javascript
详解VUE的状态控制与延时加载刷新
Mar 27 #Javascript
You might like
解析php5配置使用pdo
2013/07/03 PHP
php中Ctype函数用法详解
2014/12/09 PHP
解析WordPress中函数钩子hook的作用及基本用法
2015/12/22 PHP
WordPres对前端页面调试时的两个PHP函数使用小技巧
2015/12/22 PHP
PHP编写学校网站上新生注册登陆程序的实例分享
2016/03/21 PHP
PHP防止图片盗用(盗链)的方法小结
2016/11/11 PHP
thinkPHP js文件中U方法不被解析问题的解决方法
2016/12/05 PHP
Mac系统完美安装PHP7详细教程
2017/06/06 PHP
php实现通过stomp协议连接ActiveMQ操作示例
2020/02/23 PHP
PHP fopen中文文件名乱码问题解决方案
2020/10/28 PHP
在jquery中处理带有命名空间的XML数据
2011/06/13 Javascript
利用JS延迟加载百度分享代码,提高网页速度
2013/07/01 Javascript
JS实现定时页面弹出类似QQ新闻的提示框
2013/11/07 Javascript
JS将制定内容复制到剪切板示例代码
2014/02/11 Javascript
jquery的父子兄弟节点查找示例代码
2014/03/03 Javascript
js解决select下拉选不中问题
2014/10/14 Javascript
jQuery Mobile操作HTML5的常用函数总结
2016/05/17 Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
2016/12/14 Javascript
JS查找字符串中出现最多的字符及个数统计
2017/02/04 Javascript
js实现3D图片展示效果
2017/03/09 Javascript
jquery dataTable 后台加载数据并分页实例代码
2017/06/07 jQuery
讲解Python中的递归函数
2015/04/27 Python
python通过定义一个类实例作为ftp回调方法
2015/05/04 Python
用Python实现斐波那契(Fibonacci)函数
2016/03/25 Python
Python实现ATM系统
2020/02/17 Python
浅谈matplotlib中FigureCanvasXAgg的用法
2020/06/16 Python
tensorflow 动态获取 BatchSzie 的大小实例
2020/06/30 Python
Canvas图片分割效果的实现
2019/07/29 HTML / CSS
Ray-Ban雷朋西班牙官网:全球领先的太阳眼镜品牌
2018/11/28 全球购物
春节联欢晚会主持词
2014/03/24 职场文书
母校寄语大全
2014/04/10 职场文书
中学生的1000字检讨书
2014/10/11 职场文书
学生穿着不得体检讨书
2014/10/12 职场文书
个人整改方案范文
2014/10/25 职场文书
2016高考寄语或鼓励的话语
2015/12/04 职场文书
sql时间段切分实现每隔x分钟出一份高速门架车流量
2022/02/28 SQL Server