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 ...
随机推荐
- 使用echarts展示线状图信息的时候数据部分数据因为x轴的数据显示不全而隐藏的问题
在使用echarts来展示数据时,因为数据很多的原因导致x轴显示不全,然后有些数据也隐藏在图表中,所以这个时候我们要在 series 中设置一个属性,让所有的数据都能够展示出来,这里我们需要添加的属性 ...
- 关于C++编译的程序无法在新一台电脑上运行总结
最近在调用一个SDK调试一个主板的DPIO. 可是编译好的程序在开发电脑上运行没问题,到了新主板建立的电脑系统上就出问题. 总结了下要注意一下几方面. 1:程序本身要没有问题.至少在开发电脑系统环境下 ...
- Spring源码 之环境搭建
1.安装gitHub 在官网https://desktop.github.com/下载githubsetup.exe,在线安装总是出错,试了几次后不成功就放弃了.不知道是不是网络的原因. 后来在网上找 ...
- 2014年spark开发者大赛火热进行中！
“发现最有正能量的网络达人”,Spark开发者大赛火热进行! 2014年9月30日,2014 Spark开发者大赛在北京正式启动.本次大赛由Spark亚太研究院联合国内领先的IT技术创新与发展的互联网 ...
- POJ 1703 Find them, Catch them【种类/带权并查集+判断两元素是否在同一集合/不同集合/无法确定+类似食物链】
The police office in Tadu City decides to say ends to the chaos, as launch actions to root up the ...
- luogu P1038借教室【Noip提高组2012】
这道题我读完题目的第一感觉是: 这不就是个线段树??用线段树维护区间最小值,检查是否满足订单要求即可判断. 对于修改操作直接在区间上进行. 据说会卡一卡线段树,但是貌似写一个懒标记,连zkw线段树都不 ...
- AtCoder Grand Contest 023 A - Zero-Sum Ranges
Time limit : 2sec / Memory limit : 256MB Score : 200 points Problem Statement We have an integer seq ...
- Xamarin XAML语言教程构建ControlTemplate控件模板 (四)
Xamarin XAML语言教程构建ControlTemplate控件模板 (四) 2.在页面级别中构建控件模板 如果开发者要在页面级别中构建控件模板,首先必须将ResourceDictionary添 ...
- [BZOJ 1794] Linear Garden
Link: BZOJ 1794 传送门 Solution: IOI2008官方题解:传送门 要求序号,其实就是算字典序比其小的序列个数 从而使用数位$dp$的思想来解题,关键在于维护序列要$balan ...
- [BZOJ 1799] self 同类分布
Link: BZOJ 1799 传送门 Solution: 一句话的题目,看得爽,做得烦 一般这类和数位相关的都是数位$dp$吧 不过一开始还是感觉不太可做,毕竟每个数模数不同 但要发现,模数最高也只 ...