I've made a directive for a special type of submit button that watches when its form is submitted, and then that buttons is disabled and gets a nice animated progress bar.
我已经制定了一个特殊类型的提交按钮的指令，该按钮可以在提交表单时进行监视，然后禁用该按钮并获得一个很好的动画进度条。
This all works fine when the form is submitted by pressing the submit button or pressing enter in one of the fields, the onsubmit handler is called just fine.
通过按下提交按钮或在其中一个字段中按Enter键提交表单时，一切正常，onsubmit处理程序被调用就好了。
The problem: in one of my forms I have a textarea which I want to submit when the user presses the enter key. So I made an onEnter directive that just looks for the right key press and then executes a function.
问题：在我的一个表单中，我有一个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>
The problem of course is that this doesn't trigger the onsubmit handler, and thus the button isn't disabled or anything. How could I solve this? I've tried something like document.form.submit(), but that submits the form in the old fashioned HTML way, of course bypassing all Angular / JS code and handlers. Should I find the submit button and simulate a click? That feels very hackish too.
问题当然是这不会触发onsubmit处理程序，因此按钮不会被禁用或任何东西。我该怎么解决这个问题？我尝试过类似document.form.submit（）的东西，但是以旧式HTML方式提交表单，当然绕过所有Angular / JS代码和处理程序。我应该找到提交按钮并模拟点击吗？这也感觉非常hackish。
Sadly $scope.form is very useless, nothing there to submit it.
可悲的是，scope.form是非常没用的，没有提交它。
Edit 1: Just so the problem is clear: yes, the controller.submit() function is called just fine via the on-enter directive. However, the form doesn't get a submit event which my button is listening for.
编辑1：问题很明显：是的，通过on-enter指令调用controller.submit（）函数。但是，表单不会收到我的按钮正在侦听的提交事件。
Edit 2: Here is a gist with my button directive. The button currently needs a "pb-click" attribute, or its form needs a "pb-submit" attribute. Those functions need to return a promise.
编辑2：这是我的按钮指令的要点。该按钮当前需要“pb-click”属性，或者其形式需要“pb-submit”属性。这些功能需要返回一个承诺。
Moving this logic to a scope variable that's set from these functions might not be a big deal since that means we can use standard ng-click and ng-submit, don't need to return promises, etc. On the other hand, if you have 5 buttons on one page you then need to create 5 scope variables. Not the best idea either. Or keep using pb-click and for forms use a scope variable?
将此逻辑移动到从这些函数设置的范围变量可能不是什么大问题，因为这意味着我们可以使用标准ng-click和ng-submit，不需要返回promise，等等。另一方面，如果你在一个页面上有5个按钮，然后您需要创建5个范围变量。也不是最好的主意。或继续使用pb-click和表单使用范围变量？
2 个解决方案
#1
10
The $parse in aikoven's answer didn't seem to be working for me, so I modified it to use scope.$eval instead. I also added form.$setSubmitted() so the form properly gets the .ng-submitted class after you submit it.
aikoven的答案中的$解析似乎对我没有用，所以我修改它以使用范围。$ eval代替。我还添加了表单。$ setSubmitted（）以便表单在您提交后正确获取.ng提交的类。
app.directive('form', function() {
return {
require: 'form',
restrict: 'E',
link: function(scope, elem, attrs, form) {
form.$submit = function() {
form.$setSubmitted();
scope.$eval(attrs.ngSubmit);
};
}
};
});
#2
9
I've managed to achieve this by adding $submit method to FormController:
我已经设法通过向FormController添加$ submit方法来实现这一点：
module.directive('form', function($parse) {
return {
require: 'form',
restrict: 'E',
link: function(scope, element, attrs, formController) {
formController.$submit = $parse(attrs.ngSubmit);
}
};
});
You can then invoke form's ng-submit expression by calling $scope.myForm.$submit($scope) from the controller.
然后，您可以通过从控制器调用$ scope.myForm。$ submit（$ scope）来调用表单的ng-submit表达式。
#1
10
The $parse in aikoven's answer didn't seem to be working for me, so I modified it to use scope.$eval instead. I also added form.$setSubmitted() so the form properly gets the .ng-submitted class after you submit it.
aikoven的答案中的$解析似乎对我没有用，所以我修改它以使用范围。$ eval代替。我还添加了表单。$ setSubmitted（）以便表单在您提交后正确获取.ng提交的类。
app.directive('form', function() {
return {
require: 'form',
restrict: 'E',
link: function(scope, elem, attrs, form) {
form.$submit = function() {
form.$setSubmitted();
scope.$eval(attrs.ngSubmit);
};
}
};
});
#2
9
I've managed to achieve this by adding $submit method to FormController:
我已经设法通过向FormController添加$ submit方法来实现这一点：
module.directive('form', function($parse) {
return {
require: 'form',
restrict: 'E',
link: function(scope, element, attrs, formController) {
formController.$submit = $parse(attrs.ngSubmit);
}
};
});
You can then invoke form's ng-submit expression by calling $scope.myForm.$submit($scope) from the controller.
然后，您可以通过从控制器调用$ scope.myForm。$ submit（$ scope）来调用表单的ng-submit表达式。