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

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代码和处理程序。 我应该找到提交按钮并模拟点击吗？ 这也感觉非常hackish。

可悲的是， $scope.form是非常没用的，没有提交它。

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

编辑2： 这是我的按钮指令的要点 。 该按钮当前需要"pb-click"属性，或者其形式需要"pb-submit"属性。 这些功能需要返回一个承诺。

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

Answer 1

aikoven的答案中的$parse对我来说似乎不起作用，所以我修改它以使用scope.$eval代替。 我还添加了form.$setSubmitted()因此表单在.ng-submitted后正确获取.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);
       }
    };
});

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