angular中的compile和link函数比较

最新推荐文章于 2021-06-16 19:38:06 发布

John_like521

最新推荐文章于 2021-06-16 19:38:06 发布

阅读量356

点赞数

分类专栏： AngularJS 文章标签： angular

本文链接：https://blog.csdn.net/scgyus/article/details/80801900

版权

AngularJS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

在angularJs应用启动之前，它们是以HTML文本形式存在文本编辑器当中。应用启动会进行编译和链接，作用域会同HTML进行绑定。这个过程包含了两个阶段！

编译阶段

　　在编译的阶段，angularJs会遍历整个的文档并根据JavaScript中指令定义来处理页面上什么的指令。在遍历的过程中，有可能一层套着一层，一直延深处遍历。一但遍历和编译完毕就会返回一个叫做模板函数的函数。在这个函数没被返回（return）之前我们可以对编译后的DOM树进行修改。通常情况下，如果设置了compile函数，说明我们希望在指令和实时数据被放到DOM中之前
进行DOM操作，在这个函数中进行诸如添加和删除节点等DOM操作是安全的。本质上，当我们设置
了link选项，实际上是创建了一个postLink() 链接函数，以便compile() 函数可以定义链接函数。编译函数(compile)负责对模板DOM进行转换。

链接函数(link)负责将作用域和DOM进行链接。

1.compile

compile选项可以返回一个对象或函数。

compile函数自身不会经常去写，但是link函数经常被使用。请看下面的例子

<!DOCTYPE html>
<html ng-app="myapp">
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/angular.min.js" ></script>
	</head>
	<body>
		<div autohello="5" ng-model="hah">
			<p>你好，小炒{{name}}</p>
		</div>
		<script type="text/javascript">
			var md = angular.module("myapp",[]);
			md.directive("autohello",function(){
				return{
					restrict:'A',
					compile:function(ele,attrs,transclude){
						console.log(attrs.autohello);
						console.log("指令编译");
						var tpl = ele.children().clone();
						console.log(tpl);
						for(var i= 0 ;i<attrs.autohello-1;i++){
							ele.append(tpl.clone())
						};
						return function(scope,ele,attrs,controller){
							console.log("指令链接"+attrs.autohello);
						}
					},
					/*link:function(scope,ele,idattr){
						console.log("这个是link函数");
						var tpl = ele.children().clone();
						console.log(tpl);
					
						scope.name= "哈哈哈";
						console.log(idattr.autohello);
					}*/
					
				}
			})
			
		</script>
	</body>
</html>

我们写了一个DIV标签，定义了一个autohello的一个属性，属性值5. 我们想把 “小平你好的这几句话”输出5遍。我们定义个一个compile 的函数，里面进行了一些DOM操作。在angularJs里面内置了一个小型的jq，所以我们可以用jq的写法来操作。

页面输出如下：