Question

我有一个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

Answer 1

这是因为ngSubmit没有实例化控制器。它与其他许多ngEventDirectives一起批量创建，并且仅定义了compile属性。看一下源代码：

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

为什么我不能在angularjs中要求ngSubmit

1 个答案: