Comparing passwords using angularJS

While working on a single page application using AngularJs, I did come across a situation where I needed to compare and validate passwords. Using angular documentation site, I found that the answer to my problem was to use directives. With angularJs directive you have all the control about you HTML markup. Directives are executed during DOM compilation allowing you to transform DOM or add new behaviours.

There are directives that are offered out of box, but that does not mean you can not implement yours. Some of the points you should have when implementing your directives include:

-Directives have camel cased name e.g ngBind. The directives can then be invoked by translating the camel case name into a snake case with special characters like – or _. Optionally you can prefix the directive with x- or data- to make it HTML validator compliant. This is seen on the custom directive I have worked on here.

e.g

<input bs-password-validator="password" ></span>

-AngularJS have restrictions which are a subset of EACM which provides restriction to specific declarations style. Omitting means that the directive will be allowed on attributes only. They are as follows:

E-Element name <my-directive></my-directive>

A-attribute <div my-directive=”expression”></div>

C-class <div class=”my-directive:expression;”></div>

M-comment <!–directive: my-directive exp –>

Without further ado, lets dive to the main topic of the day. I started by adding html markup as shown below