Advanced Directives: Sharing YOUR Choices in Case of Crisis.
Advanced Directives with AngularJS
-
Upload
dionysis-pantazopoulos -
Category
Software
-
view
269 -
download
2
Transcript of Advanced Directives with AngularJS
d3nnn1z
d3nnn1z
linkedin.com/in/d3nnn1z
Technical Team Leader @jexiaDionysis
Playing bouzouki in a local tavern in Athens
Agenda● Intro● Directive Definition Object● Scopes● Transclusion● Lifecycle● Best Practices● Q&A
Thank you ng-europe!
Intro
● Directives are the backbone of AngularJS● You already using directives ( built-in, 3rd party )● You can create your own custom elements● Reusable
Directive Restrictions
Type HTML JS
A ( Attribute )
C ( Class )
M ( coMment )
E ( Element )
{restrict: 'A'}<div card></div>
<div class=”card”></div> {restrict: 'C'}
<!-- directive: card -->
<card></card> {restrict: 'E'}
{restrict: 'M'}
Coding time!
Show me the code!
TransclusionFrom angular docs:
Directive that marks the insertion point for the transcluded DOM of the nearest parent directive that uses transclusion.
Coding time!
Show me the code!
TransclusionLet’s rephrase it:
The inclusion of the directive's DOM content into the directive's template
Coding time!
Show me the code!
Step 1: Compile TOP to BOTTOM
Step 2: Pre-link TOP to BOTTOM
Step 3: Post-link BOTTOM to UP
<categories> COMPILE PRE-LINK POST-LINK
<subcategory> COMPILE PRE-LINK POST-LINK
<product> COMPILE PRE-LINK POST-LINK
Tip #1
If you want to master directives it’s a good idea to start first with understanding the scope and then proceed with the DDO
Tip #2
When you need to modify the template or append another directive
When should I use the compile function?
Tip #4
When you want to share the $scope between nested directives
When should I use the controller method?
Tip #5
Element: When your directive has a template!Attribute: When you want to add behavior to an existing element
When should I use an element and when an attribute?
Bonus Tip
Angular 1.5 introduced the component() which is much simpler than directive() and follows all the best practices around directives.
// Beforemodule.directive(name, fn);
// Aftermodule.component(name, ddo);