angularjs - ng-submit 不允许自定义绑定(bind)提交事件

Question

我有一个指令，我想用它在提交表单时广播事件。

我正在做的项目有很多表单，因此无法在ng-submit调用的函数中广播事件。

指令:

.directive('form', function() {
    return {
       restrict: 'E',
       link: function(scope, element, attrs) {
           element.bind('submit', function (e) {
               alert('some form submit');
               //trigger some event here later
           });
       },
    };
});

HTML:

<form data-ng-submit="saveForm()">
    //... some input elements
    <button type="submit">Save</button>
</form>

因此，当用户单击该按钮时，将执行 saveForm 函数，但在指令中绑定(bind)的用于启动警报的事件不会运行。当我从表单标签中删除 ng-submit 指令时，自定义事件处理程序确实可以工作。

看起来不可能将 ng-submit 和自定义事件处理程序结合起来？

有人对这种行为有任何解决方案吗？

Answer 1

您可以扩展内置的 ngSubmit 指令并传递辅助属性来 Hook 常规事件。

像这样:

app.config(function ($provide) {

  $provide.decorator('ngSubmitDirective', function ($delegate, $parse) {

    var directive   = $delegate[0];
    var origCompile = directive.compile;

    directive.compile = function (el, attrs) {

      origCompile.apply(this, arguments);

      if (attrs.hook) {
        return function (scope, el, attrs) {
          var fn = $parse(attrs['ngSubmit']);   
          var hook = $parse(attrs['hook']);

          el.on('submit', function (event) {
            scope.$apply(function () {
              fn(scope,   { $event: event });
              hook(scope, { $event: event });
            });
          });          
        };
      }
    };

    return $delegate;
  });
});

然后可以像这样使用:

app.controller('ctrl', function () {
  $scope.fn = function () {
    console.log('regularFn');
  };

  $scope.hookFn = function ($event) {
    console.log('hookFn', $event);
  };
});

<小时/>

<form ng-submit="fn()" hook="hookFn($event)">
  <input type="submit">
</form>

JsBin 为您服务:http://jsbin.com/qariqada/2/edit