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
0から始めるモジュラーモノリス-クリーンなモノリスを目指して
sushi0120
0
250
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
740
React 使いじゃなくても知っておきたい教養としての React
oukayuka
18
5.1k
変化を楽しむエンジニアリング ~ いままでとこれから ~
murajun1978
0
650
Strands Agents で実現する名刺解析アーキテクチャ
omiya0555
1
110
書き捨てではなく継続開発可能なコードをAIコーディングエージェントで書くために意識していること
shuyakinjo
0
130
11年かかって やっとVibe Codingに 時代が追いつきましたね
yimajo
1
230
AWS Summit Japan 2024と2025の比較/はじめてのKiro、今あなたは岐路に立つ
satoshi256kbyte
1
260
あまり知られていない MCP 仕様たち / MCP specifications that aren’t widely known
ktr_0731
0
200
대규모 트래픽을 처리하는 프론트 개발자의 전략
maryang
0
110
Bedrock AgentCore ObservabilityによるAIエージェントの運用
licux
8
540
No Install CMS戦略 〜 5年先を見据えたフロントエンド開発を考える / no_install_cms
rdlabo
0
420
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
332
22k
Documentation Writing (for coders)
carmenintech
73
5k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
19k
Producing Creativity
orderedlist
PRO
346
40k
The Language of Interfaces
destraynor
158
25k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Gamification - CAS2011
davidbonilla
81
5.4k
Adopting Sorbet at Scale
ufuk
77
9.5k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
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?