AngularJS ng-bind-html 指令详解及实例代码
AngularJSng-bind-html指令
AngularJS实例
绑定<p>内的innerHTML到变量myText:
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<scriptsrc="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<scriptsrc="http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular-sanitize.min.js"></script>
</head>
<body>
<divng-app="myApp"ng-controller="myCtrl">
<png-bind-html="myText"></p>
</div>
<script>
varapp=angular.module("myApp",['ngSanitize']);
app.controller("myCtrl",function($scope){
$scope.myText="Mynameis:<h1>JohnDoe</h1>";
});
</script>
<p><b>注意:</b>该实例包含了"angular-sanitize.js"文件,
该文件移除HTML中的危险代码。</p>
</body>
</html>
运行结果：
myname is:
JohnDoe
注意：该实例包含了"angular-sanitize.js"文件,该文件移除HTML中的危险代码。
定义和用法
ng-bind-html指令是通一个安全的方式将内容绑定到HTML元素上。
当你想让AngularJS在你的应用中写入HTML，你就需要去检测一些危险代码。通过在应用中引入"angular-santize.js"模块，使用ngSanitize函数来检测代码的安全性。inyourapplicationyoucandosobyrunningtheHTMLcodethroughthengSanitizefunction.
语法
<elementng-bind-html="expression"></element>
所有的HTML元素都支持该指令。
参数值
值
描述
expression
指定要执行的变量或表达式。
以上就是AngularJSng-bind-html指令实例的详细介绍，有需要的朋友可以参考下。