Angular NYC Presentation - 3 November 2014

Transcript

1. ANGULAR DIRECTIVES WTF EDITION WWW.JACOPRETORIUS.NET @JACOPRETORIUS
2. PREFACE WHY ADVANCED DIRECTIVES?
3. WHAT TO COVER •  TRANSCLUDE •  COMMUNICATING BETWEEN DIRECTIVES •  COMPILE VS LINK
4. TRANSCLUDE •  SET TRANSCLUDE: TRUE •  USE NG-TRANSCLUDE IN YOUR DIRECTIVE’S TEMPLATE
5. 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
6. TRANSCLUDE IN ANGULAR •  NG-IF •  NG-INCLUDE •  NG-REPEAT •  NG-SWITCH
7. 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
8. COMPILE VS LINK •  WHEN SHOULD YOU USE COMPILE? •  PERFORMANCE •  ANGULAR PAGE LIFE CYCLE •  ESPECIALLY USEFUL IN DIRECTIVES USING TRANSCLUDE
9. COMPILE VS LINK STRUCTURE compile: function compile(tElement, tAttrs) { // interact with template element return function postLink( ... ) { ... } } // or // link: function postLink( ... ) { ... }
10. COMPILE RETURNS A LINK FUNCTION
11. COMPILE IN ANGULAR •  HTML ANCHOR <A /> •  FORM <FORM /> •  NG-BIND •  NG-CLOAK •  NG-CLICK, NG-MOUSEDOWN, NG-MOUSEUP, NG- KEYDOWN, ETC •  NG-INCLUDE
12. Q & A •  WE’RE HIRING – GETHIGHTOWER.COM/JOBS •  QUESTIONS?