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
Playwrightはどのようにクロスブラウザをサポートしているのか
yotahada3
7
2.2k
10年もののAPIサーバーにおけるCI/CDの改善の奮闘
mbook
0
680
CI_CD「健康診断」のススメ。現場でのボトルネック特定から、健康診断を通じた組織的な改善手法
teamlab
PRO
0
160
AccessorySetupKitで実現するシームレスなペアリング体験 / Seamless pairing with AccessorySetupKit
nekowen
0
210
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
420
CSC305 Lecture 02
javiergs
PRO
1
260
そのpreloadは必要?見過ごされたpreloadが技術的負債として爆発した日
mugitti9
2
2.8k
AIを活用したレシート読み取り機能の開発から得られた実践知 / AI Receipt Scan Practice
rockname
2
1.5k
CSC305 Lecture 03
javiergs
PRO
0
230
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
120
猫と暮らすネットワークカメラ生活🐈 ~Vision frameworkでペットを愛でよう~ / iOSDC Japan 2025
yutailang0119
0
210
defer f()とdefer fの挙動を 誤解していた話
kogamochiduki
2
160
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
49
14k
Facilitating Awesome Meetings
lara
56
6.6k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
How to Ace a Technical Interview
jacobian
280
23k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
A designer walks into a library…
pauljervisheath
208
24k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Building Adaptive Systems
keathley
43
2.8k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Music & Morning Musume
bryan
46
6.8k
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?