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-05-05
这篇文章主要为大家介绍了Angular应用打包和部署实现过程详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
详解关于Angular4 ng-zorro使用过程中遇到的问题
这篇文章主要介绍了详解关于Angular4 ng-zorro使用过程中遇到的问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
本篇文章主要介绍了Angular2学习笔记之数据绑定的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
AnglarJS作为一款优秀的Web框架，可大大简化前端开发的负担。本文给大家介绍AngularJS进行性能调优的7个建议，涉及到angularjs性能调优相关知识，对本文感兴趣的朋友一起学习吧2015-12-12
这篇文章主要介绍了angularJS中$apply()方法详解,需要的朋友可以参考下2015-01-01
这篇文章主要介绍了AngularJS的视图功能应用,包括ng-view和ng-template以及$routeProvider的使用，以及 $routeProvider 需要的朋友可以参考下2015-06-06
ng-options是angular-1.3新出的一个指令,这篇文章就来介绍这个指令的用法.有需要的小伙伴可以参考下。2015-06-06
这篇文章主要给大家介绍了关于在Angular.js中下拉框实现渲染html的方法，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来跟着小编一起来学习学习吧。2017-06-06
这篇文章主要介绍了浅谈AngularJS中$http服务的简单用法,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
最新评论