This is a short follow-up post based on Reusable Bootstrap Modal Forms in which I described how an AngularJS Directive can be used to encapsulate a number of templates and configurations to present a re-usable Bootstrap Modal form.
The post concluded with the above HTML template that showed how the same directive
form-modal is used to present both a Login and a Registration modal using the
form-modal hides much detail, there is still potential for further encapsulation as the directive currently requires six attributes. This can become laborious, error prone and unnecessary when
multiple Login/Registration links are required throughout the application.
Ideally, the HTML template should be:
login-link each encapsulate
form-modal with the correct attributes.
replace: true is the key as it instructs the Directive to replace the Element,
span in this case, with the specified template, which is simply the original
form-modal from the previous code
Thoughts and Conclusions
AngularJS Directives provide a powerful facility in which configurable directives could be further specialised.
This suggests a pattern in which Directives could be designed to be configurable (where appropriate) which in-turn are then specialised through simpler directives providing the following advantages:
- DRYer code. It is less error prone (and quicker) to specify
<login-link>than the original
form-modal+six attributes declaration
- changes to the base directive automatically filter to the specialised directives. Want to replace the base modal with another Modal implementation in the future? It should be a simple as
The opinions expressed here represent my own and may or may not have any basis in reality or truth. These opinions are completely my own and not those of my friends, colleagues, acquaintances, pets, employers, etc...