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函数，但是指令中绑定的用于启动警报的事件不会运行。当我从form-tag中删除ng-submit指令时，自定义事件处理程序确实有效。

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

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

Answer 1

您可以扩展内置ngSubmit指令并传递辅助属性以挂钩到常规事件。

像这样：

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

Answer 2

您可以轻松地为任何HTML元素创建指令。

使用link

，而不是使用compile功能

.directive('form', function() {
    return {
        restrict: 'E',
        compile: function(element, attributes) {
            element.bind('submit', function(e) {
                alert('some form submit');
            });
        }
    };
});

<强> LIVE DEMO

ng-submit不允许对提交事件进行自定义绑定

2 个答案: