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的parseInt 进制问题
May 07 Javascript
JQuery live函数
Dec 24 Javascript
JS获得URL超链接的参数值实例代码
Jun 21 Javascript
js 得到文件后缀(通过正则实现)
Jul 08 Javascript
Node.js中使用事件发射器模式实现事件绑定详解
Aug 15 Javascript
一个实用的图片切换支持点击切换和自动轮播
Sep 09 Javascript
BootStrap轮播HTML代码(推荐)
Dec 10 Javascript
关于使用js算总价的问题
Jun 23 Javascript
详谈js原型继承的一些问题
Sep 06 Javascript
详解如何在微信小程序中愉快地使用sass
Jul 30 Javascript
layui表格数据复选框回显设置方法
Sep 13 Javascript
javascript前端和后台进行数据交互方法示例
Aug 07 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
mysql_num_rows VS COUNT 效率问题分析
2011/04/23 PHP
PHP中register_globals参数为OFF和ON的区别(register_globals 使用详解)
2012/02/05 PHP
PHP sprintf() 函数的应用(定义和用法)
2012/06/29 PHP
PHP 下载文件时如何自动添加bom头及解释BOM头和去掉bom头的方法
2016/01/04 PHP
Javascript打印网页部分内容的脚本
2008/11/17 Javascript
javascript 三种编解码方式
2010/02/01 Javascript
jQuery弹出(alert)select选择的值
2013/04/21 Javascript
js语法学习之判断一个对象是否为数组
2014/05/13 Javascript
js生成的验证码的实现与技术分析
2014/09/17 Javascript
javascript内置对象操作详解
2015/02/04 Javascript
一道JS前端闭包面试题解析
2015/12/25 Javascript
利用JQuery写一个简单的异步分页插件
2016/03/07 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
2016/04/12 Javascript
JS 面向对象之继承---多种组合继承详解
2016/07/10 Javascript
微信小程序 for 循环详解
2016/10/09 Javascript
xmlplus组件设计系列之图标(ICON)(1)
2017/05/05 Javascript
JS数组去重常用方法实例小结【4种方法】
2018/05/28 Javascript
快速解决vue动态绑定多个class的官方实例语法无效的问题
2018/09/05 Javascript
微信小程序+腾讯地图开发实现路径规划绘制
2019/05/22 Javascript
NProgress显示顶部进度条效果及使用详解
2019/09/21 Javascript
django Serializer序列化使用方法详解
2018/10/16 Python
python实现转盘效果 python实现轮盘抽奖游戏
2019/01/22 Python
python列表使用实现名字管理系统
2019/01/30 Python
Django之PopUp的具体实现方法
2019/08/31 Python
tensorflow2.0与tensorflow1.0的性能区别介绍
2020/02/07 Python
次世代生活态度:Hypebeast
2018/07/05 全球购物
英语自我介绍演讲稿
2014/09/01 职场文书
党委干部批评与自我批评发言稿
2014/09/28 职场文书
幼儿园中秋节活动总结
2015/03/23 职场文书
2015年采购员工作总结
2015/04/27 职场文书
简单的辞职信模板
2015/05/12 职场文书
社区扶贫帮困工作总结
2015/05/20 职场文书
入党转正介绍人意见
2015/06/03 职场文书
银行大堂经理培训心得体会
2016/01/09 职场文书
Android基于Fresco实现圆角和圆形图片
2022/04/01 Java/Android
DQL数据查询语句使用示例
2022/12/24 MySQL