What is an angularjs directive

     At times Angular can be very confusing, particularly those of us who come from a background of 'old school' javascript. Gone are the days of a bunch of functions. Now we have things like controllers, services/factories and directives, still functions just with added layers of complexity. Finding clear definitions and understandings of what each element is for can be difficult to find on the AngularJS website. Many of the tutorials online are dated back to Version 1.2, in other words, out dated. I was looking for an accurate definition of what  a Directive is as it pertains to AngularJS and found this excellent definition on stackoverflow. I have quoted and posted a link to the original post below that. Hopefully this will help some of the newcomers to AngularJS.


______________________________________________

What is an AngularJS Directive? 

What it is (see the clear definition of jQuery as an example)?

A directive is essentially a function^† that executes when the Angular compiler finds it in the DOM. The function(s) can do almost anything, which is why I think it is rather difficult to define what a directive is. Each directive has a name (like ng-repeat, tabs, make-up-your-own) and each directive determines where it can be used: element, attribute, class, in a comment.

^† A directive normally only has a (post)link function. A complicated directive could have a compile function, a pre-link function, and a post-link function.

What practical problems and situations is it intended to address?

    The most powerful thing directives can do is extend HTML. Your extensions are a Domain Specific Language (DSL) for building your application. E.g., if your application runs an online shopping site, you can extend HTML to have "shopping-cart", "coupon", "specials", etc. directives -- whatever words or objects or concepts are more natural to use within the "online shopping" domain, rather than "div"s and "span"s (as @WTK already mentioned).
Directives can also componentize HTML -- group a bunch of HTML into some reusable component. If you find yourself using ng-include to pull in lots of HTML, it is probably time to refactor into directives.

What design pattern does it embody, or alternatively, how does it fit into the purported MVC/MVW mission of angularjs

Directives are where you manipulate the DOM and catch DOM events. This is why the directive's compile and link functions both receive the "element" as an argument.

You can

• define a bunch of HTML (i.e., a template) to replace the directive

• bind events to this element (or its children)

• add/remove a class

• change the text() value

• watch for changes to attributes defined in the same element (actually it is the attributes' values that are watched -- these are scope properties, hence the directive watches the "model" for changes)

• etc.

---

In HTML we have things like <a href="...">, <img src="...">, <br>, <table><tr><th>. How would you describe what a, href, img, src, br, table, tr, and th are? That's what a directive is.

Source: http://stackoverflow.com/questions/13875466/what-is-an-angularjs-directive/13898058#13898058