CODEWITHSUNDEEP
angularjsangularjs-directive
Arashsoft
Arashsoft

Reputation: 2757

Why I cannot require ngSubmit in angularjs

I have a angularjs directive which I require ngSubmit in it:

.directive('testDirective', function(){
   return {
     scope: {},
     require: '?^ngSubmit',
     ....

In my html I have the ng-submit as the parent of directive:

<form name="testForm" ng-submit="printHello()">
  <test-directive></test-directive>
  <button type="submit">submit button</button>
</form>

I am wondering why I cannot access it and in the link function, the ngSubmitCtrl is always undefined:

link: function(scope, element, attr, ngSubmitCtrl){
  // ngSubmitCtrl is always undefind
}

This is plunker with complete code: https://next.plnkr.co/edit/8duvT6xHcixvbrDz?open=lib%2Fscript.js&deferRun=1

Upvotes: 0

Views: 43

Answers (1)

Pop-A-Stash
Pop-A-Stash

Reputation: 6652

This is because ngSubmit does not instantiate a controller. It is created in bulk with many other ngEventDirectives and only defines a compile property. Take a look at the source code:

https://github.com/angular/angular.js/blob/master/src/ng/directive/ngEventDirs.js

forEach(
  'click dblclick mousedown mouseup mouseover mouseout mousemove mouseenter mouseleave keydown keyup keypress submit focus blur copy cut paste'.split(' '),
  function(eventName) {
    var directiveName = directiveNormalize('ng-' + eventName);
    ngEventDirectives[directiveName] = ['$parse', '$rootScope', '$exceptionHandler', function($parse, $rootScope, $exceptionHandler) {
      return createEventDirective($parse, $rootScope, $exceptionHandler, directiveName, eventName, forceAsyncEvents[eventName]);
    }];
  }
);

function createEventDirective($parse, $rootScope, $exceptionHandler, directiveName, eventName, forceAsync) {
  return {
    restrict: 'A',
    compile: function($element, attr) {
      // NOTE:
      // We expose the powerful `$event` object on the scope that provides access to the Window,
      // etc. This is OK, because expressions are not sandboxed any more (and the expression
      // sandbox was never meant to be a security feature anyway).
      var fn = $parse(attr[directiveName]);
      return function ngEventHandler(scope, element) {
        element.on(eventName, function(event) {
          var callback = function() {
            fn(scope, {$event: event});
          };

          if (!$rootScope.$$phase) {
            scope.$apply(callback);
          } else if (forceAsync) {
            scope.$evalAsync(callback);
          } else {
            try {
              callback();
            } catch (error) {
              $exceptionHandler(error);
            }
          }
        });
      };
    }
  };
}

Upvotes: 2

Related Questions