How to make a directive with custom template in 5 different ways

Slides from my lighting talk given during ng-wroclaw #3 (http://www.meetup.com/AngularJS-Wroc%C5%82aw/events/218637999/)

Transcript

1. NG-WROCLAW #3 HOW TO MAKE A DIRECTIVE WITH CUSTOM TEMPLATE IN 5 DIFFERENT WAYS JAN DUDULSKI (@ ) FROM YANOO_ MONTERAIL.COM
2. WARNING COFFEE-SCRIPT HERE
3. PROBLEM < d i v m y - d i r e c t i v e = " " m y - l o a d e r - n a m e = " n a m e " > < s p a n > { { d a t a } } < / s p a n > < / d i v > a p p . d i r e c t i v e ' m y D i r e c t i v e ' , ( L o a d e r ) - > t r a n s c l u d e : t r u e l i n k : ( s c o p e , i E l e m e n t , i A t t r s ) - > s c o p e . d a t a = n e w L o a d e r ( i A t t r s . m y L o a d e r N a m e ) . l o a d It doesn't work
4. SOLUTION #1 < d i v m y - d i r e c t i v e = " " m y - l o a d e r - n a m e = " n a m e " > < s p a n > { { d a t a } } < / s p a n > < / d i v > a p p . d i r e c t i v e ' m y D i r e c t i v e ' , ( $ c o m p i l e ) - > c o m p i l e : ( t E l e m e n t , t A t t r s ) - > t e m p l a t e = t E l e m e n t . h t m l ( ) ( s c o p e , i E l e m e n t , i A t t r s ) - > i E l e m e n t . e m p t y ( ) i E l e m e n t . a p p e n d ( $ c o m p i l e ( t e m p l a t e ) ( s c o p e ) ) s c o p e . d a t a = n e w L o a d e r ( i A t t r s . m y L o a d e r N a m e ) . l o a d Credits: @iteamon
5. SOLUTION #2 < d i v m y - d i r e c t i v e = " " m y - l o a d e r - n a m e = " n a m e " > < s p a n > { { d a t a } } < / s p a n > < / d i v > a p p . d i r e c t i v e ' m y D i r e c t i v e ' , - > t r a n s c l u d e : t r u e l i n k : ( s c o p e , i E l e m e n t , i A t t r s , c o n t r o l l e r , t r a n s c l u d e F n ) - > s c o p e . d a t a = n e w L o a d e r ( i A t t r s . m y L o a d e r N a m e ) . l o a d t r a n s c l u d e F n s c o p e , ( c l o n e , s c o p e ) - > i E l e m e n t . a p p e n d ( c l o n e ) http://angular-tips.com/blog/2014/03/transclusion-and-scopes/
6. SOLUTION #3 < d i v m y - d i r e c t i v e = " " m y - l o a d e r - n a m e = " n a m e " m y - t e m p l a t e = " t e m p l a t e " > < / d i v > < s p a n > { { d a t a } } < / s p a n > a p p . d i r e c t i v e ' m y D i r e c t i v e ' , - > t e m p l a t e : ' < d i v n g - i n c l u d e = " t e m p l a t e " > < / d i v > ' l i n k : ( s c o p e , i E l e m e n t , i A t t r s ) - > s c o p e . t e m p l a t e = i A t t r s . m y T e m p l a t e s c o p e . d a t a = n e w L o a d e r ( i A t t r s . m y L o a d e r N a m e ) . l o a d
7. SOLUTION #4 < d i v m y - d i r e c t i v e = " " m y - l o a d e r - n a m e = " n a m e " m y - t e m p l a t e = " t e m p l a t e " > < / d i v > < s p a n > { { d a t a } } < / s p a n > a p p . d i r e c t i v e ' m y D i r e c t i v e ' , - > t e m p l a t e U r l : ( t E l e m e n t , t A t t r s ) - > t A t t r s . t e m p l a t e l i n k : ( s c o p e , i E l e m e n t , i A t t r s ) - > s c o p e . d a t a = n e w L o a d e r ( i A t t r s . m y L o a d e r N a m e ) . l o a d
8. SOLUTION #5 < d i v m y - d i r e c t i v e = " " m y - l o a d e r - n a m e = " n a m e " m y - t e m p l a t e = " " > < / d i v > a p p . d i r e c t i v e ' m y D i r e c t i v e ' , - > c o n t r o l l e r : ( $ s c o p e , $ e l e m e n t , $ a t t r s ) - > $ s c o p e . d a t a = n e w L o a d e r ( $ a t t r s . m y L o a d e r N a m e ) . l o a d a p p . d i r e c t i v e ' m y T e m p l a t e ' , - > r e q u i r e : ' m y D i r e c t i v e ' t e m p l a t e : ' < s p a n > { { d a t a } } < / s p a n > '
9. THX, BYE! CODETUNES.COM