AngularJS ng-bind-html 指令详解及实例代码
更新时间：2016年07月30日 15:06:24 投稿：lqh
本文主要是对AngularJS ng-bind-html 指令知识的详细讲解，并附代码实例，有需要的小伙伴可以参考下
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 指令实例的详细介绍，有需要的朋友可以参考下。
相关文章
本篇文章主要介绍了AngularJS中的路由使用及实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
跨域，前端开发中经常遇到的问题，下面这篇文章主要给大家介绍了关于angular.js中解决跨域问题的三种方式，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编一起来学习学习吧。2017-07-07
下面小编就为大家带来一篇Javascript基础_标记文字的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
这篇文章主要介绍了Angular6升级到Angular8报错问题的解决合集，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
Angular.js中用ng-repeat-start实现自定义显示
大家都知道Angular.js可以用ng-repeat来显示列表数据，可是如果想要自定义显示数据列表的话ng-repeat就实现不了了，这个时候可以利用ng-repeat-start 和 ng-repeat-end来实现，下面通过本文来详细看看实现的方法吧。2016-10-10
这篇文章主要介绍了angularjs的一些优化小技巧,本文总结了5种优化技巧,如一次绑定、尽可能少调用 ng-repeat、尽量在指令里写原生语法、页面内尽量少用filters等,需要的朋友可以参考下2014-12-12
本篇文章主要介绍了剖析Angular Component的源码示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
对于一个Sass用户,只需要理解Sass扩展部分如何工作的,就能完全理解SCSS,下面这篇文章主要给大家介绍了关于Angular中SASS样式的详细使用教程,需要的朋友可以参考下2022-05-05
这篇文章主要介绍了AngularJS实现的根据数量与单价计算总价功能,涉及AngularJS事件响应与数值运算相关操作技巧,需要的朋友可以参考下2017-12-12
下面小编就为大家带来一篇AngularJS学习笔记之依赖注入详解。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
最新评论