Directive Controller And Link Timing In AngularJS
I've talked about the timing of directives in AngularJS a few times before. But, it's a rather complicated topic, so I don't mind digging a bit deeper. This time, I'm looking at the timing of directive controllers vs. directive link functions. As the DOM (Document Object Model) is compiled by AngularJS, the directive controllers and link functions execute at different parts of the compile lifecycle.
When AngularJS compiles the DOM, it walks the DOM tree in a depth-first, top-down manner. As it walks down the DOM, it instantiates the directive controllers. Then, when it gets to the bottom of a local DOM tree branch, it starts linking the directives in a bottom-up manner as it walks back up the branch. This doesn't mean that all directive controllers are run before all directive linking; it simply means that in a local DOM branch, the directive controllers are instantiated before they are linked.
To see this in action, I've put together a very simple DOM tree in which each element has a unique (but almost identical) directive. As each directive controller and link function is executed, it will log to the console. This way, we can see the timing of the various methods in relation to the DOM tree structure.
<!doctype html>
<html ng-app="Demo">
<head>
<meta charset="utf-8" /> <title>
Directive Controller And Link Timing In AngularJS
</title>
</head>
<body> <h1>
Directive Controller And Link Timing In AngularJS
</h1> <div bn-outer> <p bn-mid> <span bn-inner> Woot! </span> </p> <p bn-second-mid> Woot, indeed! </p> </div> <!-- Load scripts. -->
<script type="text/javascript" src="../../vendor/jquery/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="../../vendor/angularjs/angular-1.2.4.min.js"></script>
<script type="text/javascript">
// Create an application module for our demo.
var app = angular.module( "Demo", [] );
// -------------------------------------------------- //
// -------------------------------------------------- //
// I demonstrate the timing of directive execution.
app.directive(
"bnOuter",
function() {
function Controller( $scope ) {
console.log( "Outer - Controller" );
}
function link( $scope, element, attributes, controller ) {
console.log( "Outer - Link" );
}
// Return directive configuration.
return({
controller: Controller,
link: link
});
}
);
// -------------------------------------------------- //
// -------------------------------------------------- //
// I demonstrate the timing of directive execution.
app.directive(
"bnMid",
function() {
function Controller( $scope ) {
console.log( "Mid - Controller" );
}
function link( $scope, element, attributes, controller ) {
console.log( "Mid - Link" );
}
// Return directive configuration.
return({
controller: Controller,
link: link
});
}
);
// -------------------------------------------------- //
// -------------------------------------------------- //
// I demonstrate the timing of directive execution.
app.directive(
"bnSecondMid",
function() {
function Controller( $scope ) {
console.log( "Second Mid - Controller" );
}
function link( $scope, element, attributes, controller ) {
console.log( "Second Mid - Link" );
}
// Return directive configuration.
return({
controller: Controller,
link: link
});
}
);
// -------------------------------------------------- //
// -------------------------------------------------- //
// I demonstrate the timing of directive execution.
app.directive(
"bnInner",
function() {
function Controller( $scope ) {
console.log( "Inner - Controller" );
}
function link( $scope, element, attributes, controller ) {
console.log( "Inner - Link" );
}
// Return directive configuration.
return({
controller: Controller,
link: link
});
}
);
</script> </body>
</html>
Before we look at the console output, take note that there are two "mid" branches. This means that AngularJS has two branches to explore before it can fully walk back up to the top DOM node. That said, when we do run the above code, we get the following console log output:
Outer - Controller
Mid - Controller
Inner - Controller
Inner - Link
Mid - Link
Second Mid - Controller
Second Mid - Link
Outer - Link
As you can see, as AngularJS walks the DOM tree, it instantiates the directive controllers on the way down; then, it links the directives on the way back up.
This is an important difference. While you can only access the DOM tree in the bottom-up linking phase, the directive controller can provide a hook into the top-down lifecycle. This can be critical if you have to handle DOM events based on when elements of the DOM tree came into existence. The linking phase can never give you that because it's executed in reverse.
Directive Controller And Link Timing In AngularJS的更多相关文章
- angularJS directive中的controller和link function辨析
在angularJS中,你有一系列的view,负责将数据渲染给用户:你有一些controller,负责管理$scope(view model)并且暴露相关behavior(通过$scope定义)给到v ...
- 【转载】AngularJs 指令directive之controller，link，compile
关于自定义指令的命名,你可以随便怎么起名字都行,官方是推荐用[命名空间-指令名称]这样的方式,像ng-controller.不过你可千万不要用 ng-前缀了,防止与系统自带的指令重名.另外一个需知道的 ...
- 49.AngularJs 指令directive之controller，link，compile
转自:https://www.cnblogs.com/best/tag/Angular/ 关于自定义指令的命名,你可以随便怎么起名字都行,官方是推荐用[命名空间-指令名称]这样的方式,像ng-cont ...
- AngularJS之指令中controller与link（十二）
前言 在指令中存在controller和link属性,对这二者心生有点疑问,于是找了资料学习下. 话题 首先我们来看看代码再来分析分析. 第一次尝试 页面: <custom-directive& ...
- AngularJS的指令(Directive) compile和link的区别及使用示例
如果我想实现这样一个功能,当一个input失去光标焦点时(blur),执行一些语句,比如当输入用户名后,向后台发ajax请求查询用户名是否已经存在,好有及时的页面相应. 输入 camnpr 失去焦点后 ...
- Angularjs Directive - Compile vs. Link
如果我想实现这样一个功能,当一个input失去光标焦点时(blur),执行一些语句,比如当输入用户名后,向后台发ajax请求查询用户名是否已经存在,好有及时的页面相应. 输入 hellobug 失去 ...
- anagularJs指令的controller，link，compile有什么不同
/directives.js增加exampleDirective phonecatDirectives.directive('exampleDirective', function() { retur ...
- controller，link，compile不同
测试案例 .directive('testDirective', function() { return { restrict: 'E', template: '<p>Hello {{nu ...
- angularjs1.x的directive中的link参数element见解
angular.module("APP",[]) .directive("testDw",function () { return{ restrict:&quo ...
随机推荐
- appium===报错adb server version (31) doesn’t match this client (39); killing…的解决办法
当使用在cmd窗口调用adb shell命令的时候 提示如下: adb server version (31) doesn't match this client (39); killing...er ...
- 查询ubuntu系统版本相关信息
查询ubuntu系统版本相关信息 sky@sky-virtual-machine:~$ cat /etc/issueUbuntu 12.04.5 LTS \n \l proc目录下记录的当前系统运行的 ...
- 远程编写+调试服务器上的Python程序
原帖参见(需自备梯子):https://webcache.googleusercontent.com/search?q=cache:1htdR2EXj5wJ:https://www.digitaloc ...
- 【乱入】Uva11021麻球繁衍
就是根据概率公式入门算算. #include<bits/stdc++.h> ; int n,m,k; double p[N],f[N]; int main(){ int T;scanf(& ...
- [ 总结 ] Linux系统测试硬盘I/O
检测硬盘I/O相对来说还是一个比较抽象的概念,但是对系统性能的影响还是至关重要的. (1)使用hdparm命令检测读取速度: hdparm命令提供了一个命令行的接口用于读取和设置IDE和SCSI ...
- DRF的异常处理
默认情况下,DRF框架通过内置的 exception_handler 方法,处理了如下异常: django内置异常 Http404 PermissionDenied DRF框架异常 APIExcept ...
- HDU 1039.Easier Done Than Said?-条件判断字符串
Easier Done Than Said? Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/O ...
- 训练指南 UVA - 11090（最短路BellmanFord+ 二分判负环）
layout: post title: 训练指南 UVA - 11090(最短路BellmanFord+ 二分判负环) author: "luowentaoaa" catalog: ...
- hdu6086（AC 自动机）
hdu6086 题意 字符串只由 \(01\) 组成,求长度为 \(2L\) 且包含给定的 \(n\) 个子串的字符串的个数(且要求字符串满足 \(s[i] \neq s[|s| - i + 1]\) ...
- Java加密解密大全
ChinaSEI系列讲义(By 郭克华) Java加密解密方法大全 如果有文字等小错,请多包涵.在不盈利的情况下,欢迎免费传播. 版权所有.郭克华 本讲义经 ...