AngularJS ng-bind-html 指令详解及实例代码


Posted in Javascript onJuly 30, 2016

AngularJS ng-bind-html 指令

AngularJS 实例

绑定 <p> 内的 innerHTML 到变量 myText:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular-sanitize.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<p ng-bind-html="myText"></p>

</div>

<script>
var app = angular.module("myApp", ['ngSanitize']);
app.controller("myCtrl", function($scope) {
 $scope.myText = "My name is: <h1>John Doe</h1>";
});
</script>

<p><b>注意:</b> 该实例包含了 "angular-sanitize.js" 文件,
该文件移除 HTML 中的危险代码。</p>

</body>
</html>

运行结果:

           my name  is:

            John Doe

            注意:该实例包含了 "angular-sanitize.js" 文件, 该文件移除 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.

语法

<element ng-bind-html="expression"></element>

所有的 HTML 元素都支持该指令。

参数值

描述
expression 指定要执行的变量或表达式。

以上就是AngularJS ng-bind-html 指令实例的详细介绍,有需要的朋友可以参考下。

Javascript 相关文章推荐
javascript之大字符串的连接的StringBuffer 类
May 08 Javascript
javascript 使td内容不换行不撑开
Nov 29 Javascript
Yii-自定义删除确认弹框(zyd)jquery实现代码
Mar 04 Javascript
简单选项卡 js和jquery制作方法分享
Feb 26 Javascript
js实现的捐赠管理完整实例
Jan 20 Javascript
js判断浏览器版本以及浏览器内核的方法
Jan 20 Javascript
全面解析Bootstrap中Carousel轮播的使用方法
Jun 13 Javascript
原生js仿jquery实现对Ajax的封装
Oct 04 Javascript
JS实现数组简单去重及数组根据对象中的元素去重操作示例
Jan 05 Javascript
使用vue2实现购物车和地址选配功能
Mar 29 Javascript
Angularjs实现数组随机排序的方法
Oct 02 Javascript
一个小时快速搭建微信小程序的方法步骤
Apr 15 Javascript
AngularJS ng-bind 指令简单实现
Jul 30 #Javascript
AngularJS ng-app 指令实例详解
Jul 30 #Javascript
如何检测JavaScript的各种类型
Jul 30 #Javascript
详解js中的apply与call的用法
Jul 30 #Javascript
javascript回到顶部特效
Jul 30 #Javascript
javascript鼠标滑过显示二级菜单特效
Nov 18 #Javascript
避免jQuery名字冲突 noConflict()方法
Jul 30 #Javascript
You might like
用文本作数据处理
2006/10/09 PHP
Thinkphp搭建包括JS多语言的多语言项目实现方法
2014/11/24 PHP
PHP实现的方程求解示例分析
2016/11/11 PHP
简单谈谈 php 文件锁
2017/02/19 PHP
IE6,IE7,IE8下使用Javascript记录光标选中范围(已补全)
2011/08/28 Javascript
jQuery获取(选中)单选,复选框,下拉框中的值
2014/02/21 Javascript
jQuery文件上传插件Uploadify使用指南
2014/06/05 Javascript
原生Javascript封装的一个AJAX函数分享
2014/10/11 Javascript
JS实现的页面自定义滚动条效果
2015/10/26 Javascript
js读取并解析JSON类型数据的方法
2015/11/14 Javascript
js仿微博实现统计字符和本地存储功能
2015/12/22 Javascript
详解vue2.0脚手架的webpack 配置文件分析
2017/05/27 Javascript
Vue实现数字输入框中分割手机号码的示例
2017/10/10 Javascript
element-ui组件中input等的change事件中传递自定义参数
2019/05/22 Javascript
关于element-ui的隐藏组件el-scrollbar的使用
2019/05/29 Javascript
Vue 2.0双向绑定原理的实现方法
2019/10/23 Javascript
基于axios 的responseType类型的设置方法
2019/10/29 Javascript
[02:04]完美世界城市挑战赛秋季赛报名开始 谁是solo路人王?
2019/10/10 DOTA
Python 找到列表中满足某些条件的元素方法
2018/06/26 Python
Django框架使用富文本编辑器Uedit的方法分析
2018/07/31 Python
PYQT5实现控制台显示功能的方法
2019/06/25 Python
Python日志syslog使用原理详解
2020/02/18 Python
Python关于__name__属性的含义和作用详解
2020/02/19 Python
澳大利亚领先的在线机械五金、园艺和存储专家:Edisons
2018/03/24 全球购物
椰子猫砂:CatSpot
2018/08/27 全球购物
法警的竞聘演讲稿
2014/01/02 职场文书
师范生的个人求职信范文
2014/01/04 职场文书
文字自荐书范文
2014/02/10 职场文书
婚庆司仪主持词
2014/03/15 职场文书
汽车销售助理岗位职责
2015/04/14 职场文书
银行资信证明
2015/06/17 职场文书
安全事故隐患排查治理制度
2015/08/05 职场文书
小学体育组工作总结
2015/08/13 职场文书
简历中的自我评价应该这样写!
2019/07/12 职场文书
MySQL 自定义变量的概念及特点
2021/05/13 MySQL
手把手教你导入Go语言第三方库
2021/08/04 Golang