Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Angular NYC Presentation - 3 November 2014
Search
Jaco Pretorius
November 03, 2014
Programming
3
290
Angular NYC Presentation - 3 November 2014
Jaco Pretorius
November 03, 2014
Tweet
Share
More Decks by Jaco Pretorius
See All by Jaco Pretorius
Searching with Solr
jacopretorius
0
75
Other Decks in Programming
See All in Programming
サイトを作ったらNFCタグキーホルダーを爆速で作れ!
yuukis
0
480
実践!App Intents対応
yuukiw00w
1
350
Kiroの仕様駆動開発から見えてきたAIコーディングとの正しい付き合い方
clshinji
1
140
オープンセミナー2025@広島LT技術ブログを続けるには
satoshi256kbyte
0
120
兎に角、コードレビュー
mitohato14
0
150
Infer入門
riru
4
1.6k
decksh - a little language for decks
ajstarks
4
21k
SOCI Index Manifest v2が出たので調べてみた / Introduction to SOCI Index Manifest v2
tkikuc
1
110
一人でAIプロダクトを作るための工夫 〜技術選定・開発プロセス編〜 / I want AI to work harder
rkaga
13
2.8k
Constant integer division faster than compiler-generated code
herumi
2
690
自作OSでDOOMを動かしてみた
zakki0925224
1
1.4k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
160
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
223
9.9k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.6k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.5k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.4k
The Cult of Friendly URLs
andyhume
79
6.5k
Optimizing for Happiness
mojombo
379
70k
The World Runs on Bad Software
bkeepers
PRO
70
11k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Fireside Chat
paigeccino
39
3.6k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Rails Girls Zürich Keynote
gr2m
95
14k
Transcript
ANGULAR DIRECTIVES WTF EDITION WWW.JACOPRETORIUS.NET @JACOPRETORIUS
PREFACE WHY ADVANCED DIRECTIVES?
WHAT TO COVER • TRANSCLUDE • COMMUNICATING BETWEEN DIRECTIVES •
COMPILE VS LINK
TRANSCLUDE • SET TRANSCLUDE: TRUE • USE NG-TRANSCLUDE IN YOUR
DIRECTIVE’S TEMPLATE
TRANSCLUDE FUNCTION • GIVES COMPLETE CONTROL OVER HOW THE BODY
OF YOUR DIRECTIVE IS INSERTED INTO THE DOM • CONTROL THE SCOPE THAT IS USED INSIDE THE BODY OF THE DIRECTIVE • OPTIONALLY USE TRANSCLUDE: ‘ELEMENT’ INSTEAD OF TRANSCLUDE: TRUE
TRANSCLUDE IN ANGULAR • NG-IF • NG-INCLUDE • NG-REPEAT •
NG-SWITCH
COMMUNICATING BETWEEN DIRECTIVES • USING THE REQUIRE PROPERTY OF YOUR
DIRECTIVE • CONTROLLER(S) OF THE REQUIRED DIRECTIVE(S) BECOME AVAILABLE AS THE 4TH PARAMETER IN THE LINK FUNCTION
COMPILE VS LINK • WHEN SHOULD YOU USE COMPILE? •
PERFORMANCE • ANGULAR PAGE LIFE CYCLE • ESPECIALLY USEFUL IN DIRECTIVES USING TRANSCLUDE
COMPILE VS LINK STRUCTURE compile: function compile(tElement, tAttrs) { //
interact with template element return function postLink( ... ) { ... } } // or // link: function postLink( ... ) { ... }
COMPILE RETURNS A LINK FUNCTION
COMPILE IN ANGULAR • HTML ANCHOR <A /> • FORM
<FORM /> • NG-BIND • NG-CLOAK • NG-CLICK, NG-MOUSEDOWN, NG-MOUSEUP, NG- KEYDOWN, ETC • NG-INCLUDE
Q & A • WE’RE HIRING – GETHIGHTOWER.COM/JOBS • QUESTIONS?