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"/> ...
随机推荐
- assert_option()可以用来对assert()进行一些约束和控制
一.evaleval用法:eval() 函数把字符串按照 PHP 代码来计算.该字符串必须是合法的 PHP 代码,且必须以分号结尾.如果没有在代码字符串中调用 return 语句,则返回 NULL.如 ...
- HDU 3605 Escape（状压+最大流）
Escape Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) Total Sub ...
- 浮点数 (IEEE-754)
浮点数又称"实数",一个浮点数包含三个部分 符号位(S) 阶码 有效数字 S:阶码:有效数字 浮点数是由科学二级制来表示的. 三种类型的浮点数: 短浮点数(32bit): S(b ...
- Elasticsearch 运维实战之1 -- 集群规划
规划一个可用于生产环境的elasticsearch集群. 集群节点划分 整个集群的节点分为以下三种主要类型 Master nodes -- 负责维护集群状态,不保存index数据, 硬件要求: 一般性 ...
- Persistent Data Structures
原文链接:http://www.codeproject.com/Articles/9680/Persistent-Data-Structures Introduction When you hear ...
- C# 构造post参数一种看起来直观点的方法[转]
因为本人经常爱用C#做一些爬虫类的小东西,每次构造post参数的时候,都是直接字符串拼接的方式的,有时候改起来不太方便. 场景: 需要post一个地址 参数列表 : username:管理员 pass ...
- Java 获取汉字拼音的方法
package lius.util; import java.io.Serializable; import java.util.ArrayList; public class JString ...
- 总结Lvs、nginx、Haproxy
!!!! 参考的比较多,自己想法少 大神总结的比较好 ====>http://www.ha97.com/5646.html 特性 LVs Nginx Haproxy 工作层 四层(传输层) 七 ...
- OpenStack学习参考
预备知识 Python 调试手段.日志:pdb 开源框架 Django 面向对象:类.继承.多态 编码规范 搭建环境 安装docker,下载openstack镜像,关于docker参考 使用fuel来 ...
- LeetCode Sum of Two Integers
原题链接在这里:https://leetcode.com/problems/sum-of-two-integers/ 题目: Calculate the sum of two integers a a ...