Почему я не могу требовать ngSubmit в angularjs - PullRequest
Новая
       17

Почему я не могу требовать ngSubmit в angularjs

0 голосов
/ 24 июня 2019

У меня есть директива angularjs, в которой мне требуется ngSubmit: 

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

В моем html родительский элемент директивы: ng-submit: 

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

Мне интересно, почему я не могу получить к нему доступ, и в функции ссылки ngSubmitCtrl всегда неопределен: 

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

Это плункер с полным кодом: https://next.plnkr.co/edit/8duvT6xHcixvbrDz?open=lib%2Fscript.js&deferRun=1

1 Ответ

2 голосов
/ 25 июня 2019

Это потому, что ngSubmit не создает экземпляр контроллера. Он создается вместе со многими другими ngEventDirectives и определяет только свойство компиляции. Посмотрите на исходный код:

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);
            }
          }
        });
      };
    }
  };
}
...