Question

我已经制定了一个特殊类型的提交按钮的指令，该按钮可以在提交表单时进行监视，然后禁用该按钮并获得一个很好的动画进度条。

当通过按下提交按钮或在其中一个字段中按Enter键提交表单时，这一切都正常工作，onsubmit处理程序被调用就好了。

问题：在我的一个表单中，我有一个textarea，我想在用户按下回车键时提交。所以我制作了一个onEnter指令，只需按下正确的键，然后执行一个函数。

<form name="form" ng-submit="controller.submit()">
    <textarea ng-model="controller.newMessage.content" 
      autofocus on-enter="controller.submit()"></textarea>
    <progress-button type="submit">Post</progress-button>
</form>

问题当然是这不会触发onsubmit处理程序，因此按钮不会被禁用或任何东西。我该怎么解决这个问题？我尝试过类似document.form.submit()的东西，但是以旧式的HTML方式提交表单，当然绕过了所有的Angular / JS代码和处理程序。我应该找到提交按钮并模拟点击吗？那也感觉非常黑。

可悲的是$scope.form非常无用，没有任何东西可以提交。

编辑1：问题很明显：是的，通过on-enter指令调用controller.submit（）函数。但是，表单不会收到我的按钮正在侦听的提交事件。

编辑2：Here is a gist with my button directive。该按钮当前需要"pb-click"属性，或者其表单需要"pb-submit"属性。这些功能需要返回一个承诺。

将此逻辑移动到从这些函数设置的范围变量可能不是什么大问题，因为这意味着我们可以使用标准ng-click和ng-submit，不需要返回promises等。另一方面，如果一个页面上有5个按钮，则需要创建5个范围变量。也不是最好的主意。或继续使用pb-click，对于表单使用范围变量？

Answer 1

aikoven的答案中的$parse似乎对我不起作用，所以我将其修改为使用scope.$eval代替。我还添加了form.$setSubmitted()，因此表单在您提交后会正确获取.ng-submitted类。

app.directive('form', function() {
    return {
        require: 'form',
        restrict: 'E',
        link: function(scope, elem, attrs, form) {
            form.$submit = function() {
                form.$setSubmitted();
                scope.$eval(attrs.ngSubmit);
            };
        }
    };
});

Answer 2

我设法通过向FormController添加$submit方法来实现这一目标：

module.directive('form', function($parse) {
    return {
       require: 'form',
       restrict: 'E',
       link: function(scope, element, attrs, formController) {          
           formController.$submit = $parse(attrs.ngSubmit);
       }
    };
});

然后，您可以通过从控制器调用ng-submit来调用表单的$scope.myForm.$submit($scope)表达式。

如何以编程方式使用AngularJS提交表单

2 个答案: