can anybody explain this directive? - angularjs

Question

Am new to angularjs. I have seen this piece of code from this link. It is working fine for me. But i am not getting how it is working ? From where it was called?
Can anybody explain this ?
var app = angular.module('plunker', []);
var ValidSubmit = ['$parse', function ($parse) {
return {
compile: function compile(tElement, tAttrs, transclude) {
return {
post: function postLink(scope, element, iAttrs, controller) {
var form = element.controller('form');
form.$submitted = false;
var fn = $parse(iAttrs.validSubmit);
element.on('submit', function(event) {
scope.$apply(function() {
element.addClass('ng-submitted');
form.$submitted = true;
if(form.$valid) {
fn(scope, {$event:event});
}
});
});
scope.$watch(function() { return form.$valid}, function(isValid) {
if(form.$submitted == false) return;
if(isValid) {
element.removeClass('has-error').addClass('has-success');
} else {
element.removeClass('has-success');
element.addClass('has-error');
}
});
}
}
}
}
}]
app.directive('validSubmit', ValidSubmit);

Answer 1

Here is the gist of what the directive is doing:
A function is assigned to handle the "onsubmit" event for that element
It looks like the directive is intended to be an attribute, which accepts a function as its value. That function is retrieved:
var fn = $parse(iAttrs.validSubmit);
An event handler for onsubmit is set up:
element.on('submit', function(event) {
And then that function is called if the form is valid:
if(form.$valid) {
fn(scope, {$event:event});
The directive monitors the state of the form that contains the element (valid or invalid)
The $watch function is used to fire an event whenever the form changes between valid and invalid:
scope.$watch(function() { return form.$valid}
Whenever the form is submitted, CSS classes are applied to the element
When the validity of the form changes, the has-error or has-success CSS class is applied to the element (based on whether the form is valid or not).
Note that the CSS classes will only be added / removed if the form is being submitted, due to the guard clause at the beginning of that function:
if(form.$submitted == false) return;