1+ <!doctype html>
2+ < html ng-app ="Demo ">
3+ < head >
4+ < meta charset ="utf-8 " />
5+
6+ < title >
7+ Transclude Function Passed To Link Function In AngularJS 1.2
8+ </ title >
9+ </ head >
10+ < body >
11+
12+ < h1 >
13+ Transclude Function Passed To Link Function In AngularJS 1.2
14+ </ h1 >
15+
16+ <!-- Will demonstrate old-school transclude configuration. -->
17+ < p bn-old-transclude >
18+ Old Transclude!
19+ </ p >
20+
21+ <!-- Will demonstrate new, easier transclude configuration. -->
22+ < p bn-new-transclude >
23+ New Transclude!
24+ </ p >
25+
26+
27+ <!-- Load scripts. -->
28+ < script type ="text/javascript " src ="../../vendor/jquery/jquery-2.0.3.min.js "> </ script >
29+ < script type ="text/javascript " src ="../../vendor/angularjs/angular-1.2.4.min.js "> </ script >
30+ < script type ="text/javascript ">
31+
32+
33+ // Create an application module for our demo.
34+ var app = angular . module ( "Demo" , [ ] ) ;
35+
36+
37+ // -------------------------------------------------- //
38+ // -------------------------------------------------- //
39+
40+
41+ // In the old-school transclude configuration, you NEEDED to
42+ // define the compile() method just to get a reference to the
43+ // transclude function. Notice that the compile() isn't
44+ // actually doing anything - it's just there so that the
45+ // "transclude" argument can be defined.
46+ app . directive (
47+ "bnOldTransclude" ,
48+ function ( ) {
49+
50+ function compile ( tElement , tAttributes , transclude ) {
51+
52+ // At this point, the "element" is the COMMENT
53+ // that has been injected into the DOM as an anchor
54+ // for the subsequent transclusion.
55+ function link ( $scope , element , attributes ) {
56+
57+ transclude (
58+ $scope ,
59+ function ( clone ) {
60+
61+ clone . css ( "border" , "2px solid pink" ) ;
62+
63+ element . after ( clone ) ;
64+
65+ }
66+ ) ;
67+
68+ }
69+
70+ return ( link ) ;
71+
72+ }
73+
74+
75+ // Return the directive configuration.
76+ return ( {
77+ compile : compile ,
78+ restrict : "A" ,
79+ transclude : "element"
80+ } ) ;
81+
82+ }
83+ ) ;
84+
85+
86+ // -------------------------------------------------- //
87+ // -------------------------------------------------- //
88+
89+
90+ // In the new transclude configuration, you no longer need the
91+ // COMPILE function _just_ to define the transclude function;
92+ // the transclude function is now passed as an optional
93+ // argument directly to the link() function.
94+ // --
95+ // NOTE: I defined the "controller" argument since the
96+ // transclude function is after it. However, since I am not
97+ // actually "require"ing any controllers, I am naming it "null."
98+ app . directive (
99+ "bnNewTransclude" ,
100+ function ( ) {
101+
102+ // At this point, the "element" is the COMMENT that
103+ // has been injected into the DOM as an anchor for
104+ // the subsequent transclusion.
105+ function link ( $scope , element , attributes , nullController , transclude ) {
106+
107+ transclude (
108+ $scope ,
109+ function ( clone ) {
110+
111+ clone . css ( "border" , "2px solid gold" ) ;
112+
113+ element . after ( clone ) ;
114+
115+ }
116+ ) ;
117+
118+ }
119+
120+
121+ // Return the directive configuration.
122+ return ( {
123+ link : link ,
124+ restrict : "A" ,
125+ transclude : "element"
126+ } ) ;
127+
128+ }
129+ ) ;
130+
131+
132+ </ script >
133+
134+ </ body >
135+ </ html >
0 commit comments