angular $compile的使用

最新推荐文章于 2021-06-10 15:55:18 发布

转载最新推荐文章于 2021-06-10 15:55:18 发布 · 526 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/changyaoself/p/7382517.html

文章标签：

#javascript #ViewUI

本文探讨了在Angular项目中如何使动态创建的HTML元素能够被Angular识别并编译，包括直接使用JS创建元素与利用$compile服务两种方式的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在写前端js时，经常会动态创建标签放入文本元素中：

比如：var strDiv='<div>new create element</div>';

　　　$(strDiv).appendTo($('div'));

在使用angular做项目时，有时也会需要动态来创建标签。那么由于angular的安全机制，是否会被angular编译；

如：var strDiv='<div>{{angular.bind}}</div>'; //这里用到了angular的绑定。

　　　$(strDiv).appendTo($('div'));

验证：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script src="libs/angular/angular.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="" ng-app='app' ng-controller='controller'>
			<!--<h1>实践$compile</h1>--> <!--通过angular 来动态添加这一句-->
		</div>
		<script type="text/javascript">
			var app=angular.module('app',[]);
			app.controller('controller',function($compile,$scope){
				/* js 动态创建*/
				$scope.appearText='创建成功，angular绑定是否成功';
				var string='<h1 id="isSuccess">{{appearText}}</h1>';
				$(string).appendTo($('div'));				
			})
		</script>
	</body>
</html>

由此可以看的出来，js动态创建的标签使用angular绑定并不会被识别和编译。

所以$compile是将创建出来的标签重新编译一下，被angular识别，这样元素将享受angular一切的待遇。

验证：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script src="libs/angular/angular.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="" ng-app='app' ng-controller='controller'>
			<!--<h1>实践$compile</h1>--> <!--通过angular 来动态添加这一句-->
		</div>
		<script type="text/javascript">
			var app=angular.module('app',[]);
			app.controller('controller',function($compile,$scope){
				/* angualr 动态创建*/
				$scope.appearText='创建成功，angular绑定是否成功';
				var compile=$compile("<h1>{{appearText}}</h1>");
				$(compile($scope)).appendTo($('div'));				
			})
		</script>
	</body>
</html>