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

我已经为一种特殊类型的submit按钮做了一个指令，它可以在表单提交时进行监视，然后禁用按钮并获得一个漂亮的动画进度条

当通过按submit按钮或在其中一个字段中按enter键提交表单时，这一切都可以正常工作，onsubmit处理程序称为just fine

问题是：在我的一个表单中，我有一个文本区域，当用户按下enter键时，我想提交它。所以我做了一个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代码和处理程序。我应该找到submit按钮并模拟单击吗？这也让人感觉很不舒服

遗憾的是，

$scope.form

非常无用，没有东西可以提交

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

编辑1：这样问题就清楚了：是的，controller.submit（）函数通过on-enter指令调用得很好。但是，表单没有收到我的按钮正在侦听的提交事件

编辑2:。按钮当前需要一个

“pb click”

属性，或者其表单需要一个

“pb submit”

属性。这些功能需要返回一个承诺

---

将此逻辑移动到从这些函数设置的范围变量可能不是什么大问题，因为这意味着我们可以使用标准的

ng click

和

ng submit

，不需要返回承诺等。另一方面，如果一个页面上有5个按钮，则需要创建5个范围变量。也不是最好的主意。或者继续使用

pb单击

并为表单使用范围变量？

我通过向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

表达式。

艾科文的答案中的

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

---

只需在按键事件结束时调用controller.submit（）？还有一个提琴可以帮助您不使用

ng form

？只需调用controller.submit（）即可执行代码，是的，但是绕过了表单本身的onsubmit处理程序。使用ng表单没有任何区别。找到了一个快速解决方法：D请随意查看：）以

$

开头的属性由angular保留。最好使用“

$submit

以外的名称，以防将来将其添加到angular property中。$setSubmited（）是关键。另外，考虑到保留的“$”注释，我更改了“$submit”方法，“submitprogrammaticly”，我认为这也更清楚