AngularJS 指令的执行过程分析

笔记：

指令的执行分析过程主要分为Compile和link两个阶段

1.最简单的指令执行过程

<!DOCTYPE html>
<html ng-app="MyModule">
<head>
<Meta charset="utf-8">
<title>指令最简单的执行过程</title>
<script src="../Script/angular.min.js" type="text/javascript"></script>
<script src="HelloAugular.js"></script>
<link rel="stylesheet" href="../bootstrap-3.0.0/css/bootstrap.css">
</head>
<body>
   <hello></hello>
</body>
</html>

var myModule = angular.module("MyModule",[]);
myModule.directive("hello",function(){
    return {
    	restrict : 'E',template : '<div> 你好，海哥！</div>',replace  : true
    }
});

2.link的执行过程

var myModule = angular.module("MyModule",replace  : true,link: function(scope,el,attrs,controller){     //自定义一个link函数
           console.log("<hello>...link...");              //控制台输出语句
    	}
    }
});

3.link的执行过程(在元素里面绑定事件)

var myModule = angular.module("MyModule",controller){     //自定义一个link函数，绑定事件
            //console.log("<hello>...link...");
            el.on("mouseenter",function() {       //鼠标事件
                console.log("鼠标进入...");        //控制台输出语句
            });            
    	}
    }
});

4.Compile的执行过程

<!DOCTYPE html>
<html ng-app="MyModule">
<head>
<Meta charset="utf-8">
<title>Compile的执行过程</title>
<script src="../Script/angular.min.js" type="text/javascript"></script>
<script src="HelloCompile.js"></script>
<link rel="stylesheet" href="../bootstrap-3.0.0/css/bootstrap.css">
</head>
<body>
  <div alotofhello="5" style="text-align: center;">
      <p>夏天到了，好热啊！</p>
  </div>
</body>
</html>

var myModule = angular.module("MyModule",[]);
myModule.directive('alotofhello',function(){
    return {
    	restrict: 'A',compile :function(el,transclude){    //transclude表示是否对指令进行一些变换
    		//从这里开始对标签元素自身进行一些变换
    		console.log("指令编译...");
    		var tpl = el.children().clone();     //元素克隆，并作为模板保存下来
    		console.log(tpl);
    		for (var i = 0; i < attrs.alotofhello - 1; i++) {
    			el.append(tpl.clone());
    		}
    		return function(scope,controller){
    			console.log("指令链接...");
    		}
    	},link:function(){     //如果同时提供Compile和link，这个link是没有用的；所以不能同时提供compile和link
    		 console.log("我自己的link函数...");
    	}
    }
});

5.Compile和link函数实例的执行过程比较

<!DOCTYPE html>
<html ng-app="MyModule">
<head>
<Meta charset="utf-8">
<title>compile和link函数的执行实例</title>
<script src="../Script/angular.min.js" type="text/javascript"></script>
<script src="HelloAngularCom.js"></script>
<link rel="stylesheet" href="../bootstrap-3.0.0/css/bootstrap.css">
</head>
<body>
<div ng-repeat="i in [1,2]">	
	<div repeater="2">
		<p>
		你好，再见！
		</p>		
	</div>
</div>
</body>
</html>

var myModule = angular.module("MyModule",[]);
myModule.directive('repeater',function() {
    return {
    	restrict: 'A',compile: function(el,transclude){
    		 //这里开始对标签元素自身进行一些变换
    		 console.log("repeat...compile...");

    		var tpl = el.children().clone();            
            for (var i = 0; i < attrs.repeater - 1; i++) {
                el.append(tpl.clone());
            }

            //返回link函数
            return function(scope,controller) {
                console.log("repeat...link...");
            }
    	}
    }
});

总结：

AngularJS 指令的执行过程分析

猜你在找的Angularjs相关文章