As we can create components like controllers, factories and services with code that can be reused in many parts of an AngularJs application, you could do the same by creating directives as reusable parts of code that applies to the HTML elements.

So, as it is described in the definition of directive in the AngularJs documentation, a directive is a marker in the DOM element that adds a new behaviour to the element or changes its default representation. The directives can be added as attributes or a css class in elements, properly as a new kind of element or even as a comment. AngularJs in the process to reinterpret all its tags and own directives in the HTML it will generate the new HTML corresponding to this modifications.

Directives in the App

In our project only created three directives.

todoList

This is a directive created as an element. It will render the list and items and everywhere where it will be rendered it will have the same behaviour (swipe right to mark as done, swipe left to show the actions available.

growingTextarea

This directive is used as an attribute in the text areas elements. Where it applies it will watch for the length of the text and it will grow the height of the element as it is being written or will adapt to the content in the moment of the loading.

readMore

This is an element directive and it will render a paragraph with a limit of characters to show with a Read More link at the end if the underlying text is larger than the showed in the element. Once clicked it will expand the paragraph element in order to show the whole text and a link to shrink the component and hide part of the text.