AngularJs自定义指令--执行顺序 (原文：http://www.cnblogs.com/sagacite/p/4624227.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 = 0;
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 = 0;
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 = 0;
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:1,
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自定义指令--执行顺序 (原文：http://www.cnblogs.com/sagacite/p/4624227.html)的更多相关文章
- AngularJs自定义指令详解（1） - restrict
下面所有例子都使用angular-1.3.16.下载地址:http://cdn.bootcss.com/angular.js/1.3.16/angular.min.js 既然AngularJs快要发布 ...
- AngularJS: 自定义指令与控制器数据交互
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 浅析AngularJS自定义指令之嵌入(transclude)
AngularJS自定义指令的嵌入功能与vue的插槽十分类似,都可以实现一些自定义内容展现.在开始之前先简单介绍下自定义指令的transclude属性和AngularJS的内置指令ng-transcl ...
- angularjs自定义指令Directive
今天学习angularjs自定义指令Directive.Directive是一个非常棒的功能.可以实现我们自义的的功能方法. 下面的例子是演示用户在文本框输入的帐号是否为管理员的帐号"Adm ...
- angularJs 自定义指令传值---父级与子级之间的通信
angularJs自定义指令用法我忽略,之前有写过,这里只说一下父子级之间如何传值: 例如: 模块我定义为myApp,index.html定义 <my-html bol-val="bo ...
- AngularJs自定义指令详解（10） - 执行次序
代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8 ...
- AngularJs自定义指令详解（8） - priority
priority 默认值为0. 当一个元素上声明两个指令,而且它们的priority一样,谁先被调用?这个需要分情况讲.下面先给个例子: <!DOCTYPE html> <html& ...
- angularJS——自定义指令
主要介绍指令定义的选项配置 //angular指令的定义,myDirective ,使用驼峰命名法 angular.module('myApp', []) .directive('myDirectiv ...
- angularJS自定义指令间的“沟通”
由此例子我们可以看出,angularJS使用指令时link的执行顺序<html> <head> <meta charset="utf-8"/> ...
随机推荐
- 2016huasacm暑假集训训练三 G - 还是畅通工程
题目链接:http://acm.hust.edu.cn/vjudge/contest/123674#problem/G 这题和上一道题差不多,还更简单点,直接用prim算法就行,直接贴AC代码: im ...
- tachyon of zybo cluster
把Tachyon层加入spark和hadoop之间,以加速集群 官网:http://tachyon-project.org/ github:https://github.com/amplab/tach ...
- web网站获取客户端mac地址
<HTML><HEAD><TITLE>WMI Scripting HTML</TITLE> <META http-equiv=Content-Ty ...
- Thymeleaf 与 Javascript
在 javascript 代码中使用 Thymeleaf 模板引擎: <script th:inline="javascript"> $("#content& ...
- 用NotePad如何实现大小写转换
1.小写转换大写 Ctrl + shift + U 2.大写转换小写 Ctrl + U
- oracle查询某个时间点的数据
1. select * from emps as of timestamp to_Date('2015-12-11 14:00:00','yyyy-mm-dd hh24:mi:ss'),SQL语句是查 ...
- kaggle实战记录 =>Digit Recognizer
date:2016-09-13 今天开始注册了kaggle,从digit recognizer开始学习, 由于是第一个案例对于整个流程目前我还不够了解,首先了解大神是怎么运行怎么构思,然后模仿.这样的 ...
- vuejs里封装的和IOS,Android通信模块
项目需要,在vuejs开发的web项目中与APP进行通信,实现原理和cordova一致.使用WebViewJavascriptBridge. 其实也是通过拦截url scheme,支持ios6往前的系 ...
- shell中对字符串的处理
1.替换字符串1为字符串2 sed "s/str1/str2/g" 2.获取字符串中的一部分 例:boke-blade 取得boke:sed -e "s/-.*//g&q ...
- stream数据流
首先必须先要了解Buffer,Buffer是js和c++的结合体,类数组,通常与Stream一起用: 1. (1).Buffer是个类,因此可以构建成对象 (2).buf具有数组的性质 字符串转换成二 ...