Directives in AngularJS

Directives in AngularJS helps in extending the power of HTML.

The important responsibilities of directives are

  1. DOM manipulation [ng-show]
  2. Relieving view events  [ng-click]
  3. Widgets [via custom directives]


AngularJS provides a set of build in directives like ng-bind, ng-class etc.

Custom Directives can also be written quite easily. We can either use

  1. Link function of the directive to define how the directive should behave.
  2. Create a Directive Controller and put the logic.

Directives in your View/HTML can be written as:

  1. Element Names or Tags (E)
  2. Attributes (A)
  3. Classes (C)
  4. HTML Comments (M)

(E, A C or M are restriction types)

Note : Angular normalizes an element’s name or tag to map elements and directives. More details can be found here.



Custom Directive Code Snippet:



Few important points to note here:

  1. Angular doesn’t complain if there are multiple directives with the same name declared on a page.
  2. While loading the Dynamic DOM, Angular compiles all the directives [including ones with same name as in our examples] but only executes the first directive.
  3. Changing the order of the directive declarations having the same name impacts your output.
  4. Hence its vital to name directives uniquely.

My next post will talk more about

Requiring Directives within another and isolation of scope.



Mean Stack


MEAN and How..

MEAN is one of the leading full stack java script application development stack which is currently widely used across industry to build large scale DIRTy [Data Intensive Real Time ] applications.

Of course we’ve had LAMP, WAMP and other full stack frameworks during the yester decades. However, MEAN beats them all in many ways and importantly it is Platform independent. Your Code will work on Linux, windows and heck even mac.

The essence of MEAN is Java script and i’ll continue to blog about a few things here for the betterment of the world 😛