当前位置：慕源网 > AngularJS ng-bind-html指令

AngularJS ng-bind-html指令

作者 : 慕源网 本文共893个字，预计阅读时间需要3分钟 发布时间： 2022-05-3 共420人阅读

AngularJS ng-bind-html指令，AngularJS中的ng-bind-HTML指令用于将HTML元素的innerHTML绑定到应用程序数据，并从HTML字符串中删除危险代码。$sanitize服务对于ng-bind-HTML指令是必须的。所有HTML元素都支持它。

语法：

<element ng-bind-html="expression"> 内容... </element>

示例：

<!DOCTYPE html>
<html ng-app="myApp">

<head>
	<title>ng-bind-html Directive</title>
	
	<script src=
"//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js">
	</script>
	<script src=
"//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular-sanitize.min.js">
	</script>
	
	<style>
		.green {
			color: green;
			font-size: 20px;
		}
	</style>
</head>

<body ng-controller="geek" style="text-align:center">
	
	<h1 style="color:green;">GeeksforGeeks</h1>
	<h2 style="">ng-bind-html Directive</h2>
	
	<p ng-bind-html="text"></p>
	
	<script>
		var myApp = angular.module("myApp", ['ngSanitize']);
		
		myApp.controller("geek", ["$scope", function($scope) {
			$scope.text =
			"<span class='green'> GeeksforGeeks</span> is the"
			+ " computer science portal for geeks.";
		}]);
	</script>
</body>

</html>

输出：


慕源网 » AngularJS ng-bind-html指令

常见问题FAQ

程序仅供学习研究，请勿用于非法用途，不得违反国家法律，否则后果自负，一切法律责任与本站无关。
请仔细阅读以上条款再购买，拍下即代表同意条款并遵守约定，谢谢大家支持理解！
慕源网

慕源网 普通

分享到：

发表评论

相关推荐

开通VIP 享更多特权，建议使用QQ登录
账号登录/注册
QQ登录
微博登录