您的位置：首页 > Web前端 > AngularJS

AngularJS 指令的执行过程分析

2017-07-30 16:35 260 查看
 笔记：

        指令的执行分析过程主要分为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", []);
myModule.directive("hello", function(){
return {
restrict : 'E',
template : '<div> 你好，海哥！</div>',
replace  : true,
link: function(scope, el, attrs ,controller){     //自定义一个link函数
console.log("<hello>...link...");              //控制台输出语句
}
}
});


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

var myModule = angular.module("MyModule", []);
myModule.directive("hello", function(){
return {
restrict : 'E',
template : '<div> 你好，海哥！</div>',
replace  : true,
link: function(scope, el, attrs ,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,attrs,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,el,attrs,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, attrs, 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, el, attrs, controller) {
console.log("repeat...link...");
}
}
}
});


总结：

             
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航