问题描述
我做了一个指令,为一种特殊类型的提交按钮的表单提交时手表,然后将该按钮被禁用,并得到一个不错的动画进度条。
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.
时的形式是由pressing提交的这一切工作正常的提交按钮或pressing的领域之一进入,onsubmit处理程序被调用就好了。
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.
问题:在我的形式我有,我想,当用户presses回车键提交文本区域。所以我做了一个的OnEnter指令,只是看起来合适键preSS,然后执行的函数。
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.
<form name="form" ng-submit="controller.submit()">
<textarea ng-model="controller.newMessage.content" autofocus on-enter="controller.submit()"
<progress-button type="submit">Post</progress-button>
</form>
当然,问题是,这不会触发onsubmit处理程序,因此,按钮未禁用或任何东西。我怎么能解决这个问题?我试着像 document.form.submit()
,但在提交老式HTML方式的形式,当然绕过所有角/ JS code和处理程序。我应该找到提交按钮,模拟点击?这给人的感觉非常的hackish了。
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.
不幸的是 $ scope.form
很没用,什么也没有提交它。
Sadly $scope.form
is very useless, nothing there to submit it.
编辑1:正是这样的问题是清楚的:是的,controller.submit()函数是通过对输入指令称为就好了。然而,的形式没有得到一个提交事件,我的按钮被监听
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.
编辑2:这里是我的按键指令一个要点是:https://gist.github.com/kevinrenskers/d66dbebe43c8533efaf2.按钮目前需要一个PB-单击属性,或它的形式需要一个PB-提交属性。这些功能需要退货的承诺。
Edit 2: Here is a gist with my button directive: https://gist.github.com/kevinrenskers/d66dbebe43c8533efaf2. The button currently needs a "pb-click" attribute, or its form needs a "pb-submit" attribute. Those functions need to return a promise.
移动这样的逻辑到的这些功能设置可能不是一个大问题,因为这意味着我们可以使用标准的NG-点击一个范围的变量NG-提交,不需要返回的承诺等。另一方面,如果你有一个页面上5个按钮,你则需要创建5范围的变量。不是最好的主意。或者用PB不断点击和形式的使用范围的变量?
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?
推荐答案
我已经设法通过加入 $提交
法的FormController来实现这一点:
I've managed to achieve this by adding $submit
method to FormController:
module.directive('form', function($parse) {
return {
require: 'form',
restrict: 'E',
link: function(scope, element, attrs, formController) {
formController.$submit = $parse(attrs.ngSubmit);
}
};
});
然后可以通过调用 $ scope.myForm。$提交($范围) NG-提交
前pression code>从控制器。
You can then invoke form's ng-submit
expression by calling $scope.myForm.$submit($scope)
from the controller.
这篇关于如何以编程方式提交与AngularJS的表单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!