AngularJs自定义指令详解（10） - 执行次序
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="../lib/angular-1.3.16/angular.min.js"></script>
<script src=""></script>
<title></title>
<script language="JavaScript">
var count = ;
var logText=function(text){
count++;
console.log(count+'，'+text);
};
angular.module("app", [])
.controller("mainController", function ($scope) {
$scope.logText = logText;
logText('控制器初始化。');
}).directive('d',function() {
logText('指令初始化。');
return{
link: {
pre: function () {
logText('preLink函数执行。');
},
post: function () {
logText('postLink函数执行。');
}
},
controller:function(){
logText('内部控制器初始化。');
},
template:'{{logText("模板表达式执行。")}}' };
});
</script>
</head>
<body ng-app="app">
<div ng-controller="mainController">
<div d></div>
<div d></div>
</div>
</body>
</html>
看看控制台：
从控制台可以看出，指令初始化甚至比控制器还早。难道说指令一旦定义，就算不在DOM中使用也会初始化？我们删掉DOM中的
<div d></div>
<div d></div>
代码，再看控制台，发现指令并不初始化。所以推测不对。
注意我们使用了两次d指令，但是指令的初始化只运行了一次。这个要特别小心。
另外指令内部的控制器初始化比链接函数更早执行，此后就是执行preLink和postLink。一个指令把这些执行完毕，才轮到下一个指令。
模板里的表达式居然执行了6次之多，也就是说使用一次指令就要执行3次表达式，这个在性能上需要多加考虑。
以下代码加入了编译函数（compile并不常用，不需要深入了解）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="../lib/angular-1.3.16/angular.min.js"></script>
<script src=""></script>
<title></title>
<script language="JavaScript">
var count = ;
var logText=function(text){
count++;
console.log(count+'，'+text);
};
angular.module("app", [])
.controller("mainController", function ($scope) {
$scope.logText = logText;
logText('控制器初始化。');
}).directive('d',function() {
logText('指令初始化。');
return{
compile: function(){
logText('编译函数执行。');
return{
pre: function () {
logText('preLink函数执行。');
},
post: function () {
logText('postLink函数执行。');
}
};
},
controller:function(){
logText('内部控制器初始化。');
}
};
});
</script>
</head>
<body ng-app="app">
<div ng-controller="mainController">
<div d></div>
<div d></div>
</div>
</body>
</html>
控制台输出：
可以看出编译函数比控制器更早执行，但是跟指令的初始化不同，使用两次指令就需要运行两次编译函数。
上面例子在使用指令时，元素是并列的。
那么，一个元素使用两个指令，或两个指令嵌套使用，会怎么样呢？
看代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="../lib/angular-1.3.16/angular.min.js"></script>
<script src=""></script>
<title></title>
<script language="JavaScript">
var count = ;
var logText=function(text){
count++;
console.log(count+'，'+text);
};
angular.module("app", [])
.controller("mainController", function ($scope) {
$scope.logText = logText;
logText('mainController控制器初始化。');
}).directive('d1',function() {
logText('d1 指令初始化。');
return{
priority:,
compile: function(){
logText('d1 编译函数执行。');
return{
pre: function () {
logText('d1 preLink函数执行。');
},
post: function () {
logText('d1 postLink函数执行。');
}
};
},
controller:function(){
logText('d1 内部控制器初始化。');
}
};
}).directive('d2',function() {
logText('d2 指令初始化。');
return{
compile: function(){
logText('d2 编译函数执行。');
return{
pre: function () {
logText('d2 preLink函数执行。');
},
post: function () {
logText('d2 postLink函数执行。');
}
};
},
controller:function(){
logText('d2 内部控制器初始化。');
}
};
});
</script>
</head>
<body ng-app="app">
<div ng-controller="mainController">
<div d1 d2></div>
</div>
</body>
</html>
以上代码定义d1指令和d2指令，且它们在同一个元素上使用。注意d1的优先级更高。
关于优先级的问题，可回头看文章http://www.cnblogs.com/sagacite/p/4622092.html
控制台输出：
可以发现跟并列元素不同，在同一个元素上使用两个指令，其内部控制器初始化、preLink函数和postLink函数分组执行，而不是先执行完一个指令的，再执行下一个指令的。
更换指令的使用次序：<div d2 d1></div>
可以发现这时d2指令先初始化，但是其他函数的执行次序都不变。
修改DOM的代码如下：
<div d1><div d2></div></div>
再看控制台：
可以发现d2指令的初始化延迟到d1编译函数执行之后了。内部控制器的初始化次序也发生了变化。
AngularJs自定义指令详解（10） - 执行次序的更多相关文章
- AngularJs自定义指令详解（1） - restrict
下面所有例子都使用angular-1.3.16.下载地址:http://cdn.bootcss.com/angular.js/1.3.16/angular.min.js 既然AngularJs快要发布 ...
- AngularJs自定义指令详解（8） - priority
priority 默认值为0. 当一个元素上声明两个指令,而且它们的priority一样,谁先被调用?这个需要分情况讲.下面先给个例子: <!DOCTYPE html> <html& ...
- AngularJs自定义指令详解（6） - controller、require
在前面文章中提到一旦声明了require,则链接函数具有第四个参数:controller. 可见require和controller是配合使用的. 在自定义指令中使用controller,目的往往是要 ...
- AngularJs自定义指令详解（2） - template
一些用于定义行为的指令,可能不需要使用template参数. 当指定template参数时,其值可以是一个字符串,表示一段HTML文本,也可以是一个函数,这函数接受两个参数:tElement和tAtt ...
- AngularJs自定义指令详解（5） - link
在指令中操作DOM,我们需要link参数,这参数要求声明一个函数,称之为链接函数. 写法: link: function(scope, element, attrs) { // 在这里操作DOM} 如 ...
- AngularJs自定义指令详解（9） - terminal
例子: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8 ...
- AngularJs自定义指令详解（7） - multiElement
multiElement不太常用,从下面这个例子可以大致看出它的作用: <!DOCTYPE html> <html> <head lang="en"& ...
- AngularJs自定义指令详解（3） - scope
我们之所以要定义指令,目的是重用指令.假设有这么一个应用场景:在同一个html里使用了两次my-directive,第一个my-directive要展示的是Hello World,第二个my-dire ...
- AngularJs自定义指令详解（4） - transclude
transclude默认值为false,如果设置 transclude为true,那么相应地,必须在模板代码中加入ng-transclude指令. 先看个例子: <!DOCTYPE html&g ...
随机推荐
- DapperExtensions的基本用法
介绍下使用Dapper-Extensions的基本语法 //实体类 DemoEntity entity = new DemoEntity(); //根据实体主键删除 this.Delete<De ...
- Android开发--Socket通信
一.Socket通信简介 Android与服务器的通信方式主要有两种,一是Http通信,一是Socket通信.两者的最大差异在于,http连接使用的是"请求-响应方式",即在请求时 ...
- 仿google art图片预览算法及demo（iphone/安卓版本）
演示地址:用手机扫描二维码(手机端浏览) 功能:双击放大,单指操作拖动,双指操作放大缩小.
- Jquery day02
jquery day01回顾 语法: $("选择器") , $(dom对象) , $("<div>") 选择器: 基本:#id.ele ...
- iOS 获取应用版本信息
现在许多接口都需要上传应用版本信息,所以呢,这个是必不可少的,可以在进入应用的时候先获取到,然后存在单例中,用的时候直接调用单例就好了,记住这些字符串 NSString *executableFile ...
- 关于asp.net 开发的小技巧—让传值对象化
前端:前端 定义一个对象, 传值时实例此对象,序列化成json字符串 代码如下: 定义js对象: ///定义一个查询条件对象 var SearchCondition=function(){ this. ...
- 第六百零七八天 how can I 坚持
昨天去跟着谈了个项目,涨了些见识吧,关注下客户关注的,多考虑些,昨天谈完就下班,陪着sy去了趟西单换电池,苹果的售后也真是挺垃圾的. 今天本来是要搭搭环境的,结果代码没搞来,明天去客户那边搞代码,感觉 ...
- Winform 获取当前单击的控件名称 和 向窗体添加控件
Winform如何获取当前单击的控件名称,比如有100个Button 和一个button_Click()的按钮事件 ,分别点击不同按钮后显示所点击的按钮名称?private void button_C ...
- SQL Server 的数据表简单操作
--创建数据表--[use 要创建数据表的数据库名称go]create table 要创建的表名(字段名 数据类型[长度] [null | not null] [primary key],... .. ...
- [转]Redmine 配置163邮箱
redmine的邮件发送功能还是很有用的.像项目有更新啦,任务分配啦,都能邮件发送的相关责任人.我自己在linux服务器上安装并启动了redmine后,邮件一直发送了不了.查了网上的资料,都是讲修改下 ...