AngularJS ng-bind-html指令

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

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登录