1+ <!doctype html>
2+ < html ng-app ="Demo ">
3+ < head >
4+ < meta charset ="utf-8 " />
5+
6+ < title >
7+ Directive Controller And Link Timing In AngularJS
8+ </ title >
9+ </ head >
10+ < body >
11+
12+ < h1 >
13+ Directive Controller And Link Timing In AngularJS
14+ </ h1 >
15+
16+ < div bn-outer >
17+
18+ < p bn-mid >
19+
20+ < span bn-inner >
21+
22+ Woot!
23+
24+ </ span >
25+
26+ </ p >
27+
28+ < p bn-second-mid >
29+
30+ Woot, indeed!
31+
32+ </ p >
33+
34+ </ div >
35+
36+
37+ <!-- Load scripts. -->
38+ < script type ="text/javascript " src ="../../vendor/jquery/jquery-2.0.3.min.js "> </ script >
39+ < script type ="text/javascript " src ="../../vendor/angularjs/angular-1.2.4.min.js "> </ script >
40+ < script type ="text/javascript ">
41+
42+ // Create an application module for our demo.
43+ var app = angular . module ( "Demo" , [ ] ) ;
44+
45+
46+ // -------------------------------------------------- //
47+ // -------------------------------------------------- //
48+
49+
50+ // I demonstrate the timing of directive execution.
51+ app . directive (
52+ "bnOuter" ,
53+ function ( ) {
54+
55+ function Controller ( $scope ) {
56+
57+ console . log ( "Outer - Controller" ) ;
58+
59+ }
60+
61+
62+ function link ( $scope , element , attributes , controller ) {
63+
64+ console . log ( "Outer - Link" ) ;
65+
66+ }
67+
68+
69+ // Return directive configuration.
70+ return ( {
71+ controller : Controller ,
72+ link : link
73+ } ) ;
74+
75+ }
76+ ) ;
77+
78+
79+ // -------------------------------------------------- //
80+ // -------------------------------------------------- //
81+
82+
83+ // I demonstrate the timing of directive execution.
84+ app . directive (
85+ "bnMid" ,
86+ function ( ) {
87+
88+ function Controller ( $scope ) {
89+
90+ console . log ( "Mid - Controller" ) ;
91+
92+ }
93+
94+
95+ function link ( $scope , element , attributes , controller ) {
96+
97+ console . log ( "Mid - Link" ) ;
98+
99+ }
100+
101+
102+ // Return directive configuration.
103+ return ( {
104+ controller : Controller ,
105+ link : link
106+ } ) ;
107+
108+ }
109+ ) ;
110+
111+
112+ // -------------------------------------------------- //
113+ // -------------------------------------------------- //
114+
115+
116+ // I demonstrate the timing of directive execution.
117+ app . directive (
118+ "bnSecondMid" ,
119+ function ( ) {
120+
121+ function Controller ( $scope ) {
122+
123+ console . log ( "Second Mid - Controller" ) ;
124+
125+ }
126+
127+
128+ function link ( $scope , element , attributes , controller ) {
129+
130+ console . log ( "Second Mid - Link" ) ;
131+
132+ }
133+
134+
135+ // Return directive configuration.
136+ return ( {
137+ controller : Controller ,
138+ link : link
139+ } ) ;
140+
141+ }
142+ ) ;
143+
144+
145+ // -------------------------------------------------- //
146+ // -------------------------------------------------- //
147+
148+
149+ // I demonstrate the timing of directive execution.
150+ app . directive (
151+ "bnInner" ,
152+ function ( ) {
153+
154+ function Controller ( $scope ) {
155+
156+ console . log ( "Inner - Controller" ) ;
157+
158+ }
159+
160+
161+ function link ( $scope , element , attributes , controller ) {
162+
163+ console . log ( "Inner - Link" ) ;
164+
165+ }
166+
167+
168+ // Return directive configuration.
169+ return ( {
170+ controller : Controller ,
171+ link : link
172+ } ) ;
173+
174+ }
175+ ) ;
176+
177+ </ script >
178+
179+ </ body >
180+ </ html >
0 commit comments