Directives From the jQuery Perspective

Let’s imagine how we attach special behaviors to elements in jQuery. To implement a date picker, first we create a normal HTML input element, like this:

<input type="text" class="date-picker"/>

Then we change its default behavior through some JavaScript code, which might look something like this:

$(".date-picker").datePicker();

But when other designers see your code they might not immediately see what this element does. They need to check out the underlying JavaScript code to be sure of its function. But with angularjs you can create a directive for this element and use it like this:

<date-picker></date-picker>

In this way, you can create truly reusable components with directives, and this approach to building custom components is definitely neater and more intuitive.