1

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);
Community
  • 1
  • 1
Vadapalli
  • 123
  • 8

1 Answers1

0

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;
Josh Darnell
  • 11,304
  • 9
  • 38
  • 66
  • Thanks for your help. But still am not getting.. from where it was called/invoked. it was working from page load only. – Vadapalli Dec 09 '14 at 04:38
  • what are these post: function postLink(scope, element, iAttrs, controller) and compile: function compile(tElement, tAttrs, transclude) { – Vadapalli Dec 09 '14 at 04:42
  • @BhavaniMalladi Notice in the [other post you linked to](http://stackoverflow.com/questions/18798375/show-validation-error-messages-on-submit-in-angularjs/19408192#19408192) that the form element has this attribute: `valid-submit="connect()"` That is what "calls" the directive. Does that answer your question? I'm not sure I totally understood it. – Josh Darnell Dec 09 '14 at 04:42
  • Thank you. It is more for me. – Vadapalli Dec 09 '14 at 04:45
  • Okay, great. You can read more about those functions you mentioned in [the `$compile` documentation](https://docs.angularjs.org/api/ng/service/$compile), @BhavaniMalladi. Be sure to take your time - Angular directives are a large topic. – Josh Darnell Dec 09 '14 at 04:46