深入理解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 相关文章推荐
极酷的javascirpt,让你随意编辑任何网页
Feb 25 Javascript
jquery 表单进行客户端验证demo
Aug 24 Javascript
使用JQUERY进行后台页面布局控制DIV实现左右式
Jan 07 Javascript
js进行表单验证实例分析
Feb 10 Javascript
vue获取DOM元素并设置属性的两种实现方法
Sep 30 Javascript
vue2 router 动态传参,多个参数的实例
Nov 10 Javascript
详解jQuery-each()方法
Mar 13 jQuery
浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)
Sep 10 Javascript
vue集成openlayers加载geojson并实现点击弹窗教程
Sep 24 Javascript
vant自定义二级菜单操作
Nov 02 Javascript
使用react-virtualized实现图片动态高度长列表的问题
May 28 Javascript
Vue如何清空对象
Mar 03 Vue.js
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
新版mysql+apache+php Linux安装指南
2006/10/09 PHP
php中单个数据库字段多列显示(单字段分页、横向输出)
2014/07/28 PHP
php preg_match的匹配不同国家语言实例
2016/12/29 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
createElement动态创建HTML对象脚本代码
2008/11/24 Javascript
用jquery与css打造个性化的单选框和复选框
2010/10/20 Javascript
jQuery语法总结和注意事项小结
2012/11/11 Javascript
javascript算法题:求任意一个1-9位不重复的N位数在该组合中的大小排列序号
2015/04/01 Javascript
JS使用正则表达式除去字符串中重复字符的方法
2015/11/05 Javascript
vue实现列表的添加点击
2016/12/29 Javascript
原生JavaScript实现的简单省市县三级联动功能示例
2017/05/27 Javascript
基于JavaScript实现多级菜单效果
2017/07/25 Javascript
JSON 数据格式详解
2017/09/13 Javascript
vue-router 权限控制的示例代码
2017/09/21 Javascript
在vue-cli中组件通信的方法
2017/12/16 Javascript
bootstrap与pagehelper实现分页效果
2018/12/29 Javascript
详解vue中axios的使用与封装
2019/03/20 Javascript
vue单文件组件无法获取$refs的问题
2020/06/24 Javascript
vue+element获取el-table某行的下标,根据下标操作数组对象方式
2020/08/07 Javascript
Pyhthon中使用compileall模块编译源文件为pyc文件
2015/04/28 Python
python统计文本字符串里单词出现频率的方法
2015/05/26 Python
快速了解Python中的装饰器
2018/01/11 Python
django使用LDAP验证的方法示例
2018/12/10 Python
Python描述数据结构学习之哈夫曼树篇
2020/09/07 Python
python mock测试的示例
2020/10/19 Python
pytorch Dataset,DataLoader产生自定义的训练数据案例
2021/03/03 Python
三星加拿大官方网上商店:Samsung CA
2020/12/18 全球购物
网络工程师面试(三木通信技术有限公司)
2013/06/05 面试题
基督教婚礼主持词
2014/03/14 职场文书
中班开学寄语
2014/04/04 职场文书
酒店节能减排方案
2014/05/26 职场文书
体育系毕业生自荐信
2014/06/28 职场文书
幼儿园国庆节活动总结
2015/03/23 职场文书
Python+Appium自动化测试的实战
2021/06/30 Python
Python制作春联的示例代码
2022/01/22 Python
解决springboot druid数据库连接失败后一直重连的方法
2022/04/19 Java/Android