2013-06-05 31 views
28

我正在将旧的html页面从jQuery迁移到Angular,并且它包含一些<input type="submit">的老式表单。当我使用ng-app指令丰富了我的页面时,旧窗体停止工作(我的意思是当您按下submit按钮时,什么都不会发生)。Angular.js提交表单老式

我搜索了这个问题并扫描了Angular文档,但似乎没有人再提交表单了。

任何有关如何将这些表单重新生成而没有太多击键的建议将不胜感激。

目前的形式有以下标记:

<form name="form_upload" method="post" action="" enctype="multipart/form-data"> 
<input type="file" name="file"> 
<input type="submit" name="send" value="Upload"> 
</form> 

所有jQuery代码我清洗和开始角新鲜。

UPD:

我想我现在发现的原因,它是空的action属性,似乎空的动作没有被standarts欢迎,但使用起来非常方便,让您提交表单到当前页面的URL,有没有办法做到这一点?

+0

您如何使用提交表单?你使用jQuery的工作? –

+2

它应该工作,除了行动是空的。看看http://plnkr.co/edit/clDeu8NVLCXLh2vojjxp?p = preview –

+0

是的,这是空的行动,谢谢你的提示 – Dfr

回答

18

去关闭文档的:http://docs.angularjs.org/api/ng.directive:form

角的理念是尽可能减少数据和页面重新加载,所以他们不喜欢“老派的形式”,但你可以通过使用action属性绕过它形成。

Angular设计时考虑到单页应用程序,避免整页重装,因为这需要花费更长的时间。通过使用ngSubmit指令,您可以定义一个函数通过表单数据发送到服务器,并获得比完整页面重新加载更快的响应。字节而不是千字节。

+7

答案也会回答他的问题。例如,我一直在试图弄清楚如何使用action属性提交给你所在的页面,当URL被散列时,因为它是重置密码的URL。在拔出头发后结束工作的是'action =“#”' – morgs32

+0

,但有时你必须以传统方式提交它,例如, Facebook重定向。你必须重新加载页面。你怎么能这样做? – OMGPOP

+0

另一个例子是与Symfony和Angular Material的集成。你喜欢symfony的方式来处理每个case,并且一个整洁的界面 –

0

我已经这样做了。我很确定我使用jQuery来提交表单,但你可以用普通的旧javascript来做。

一个角度窗体页上的评论表明这一点:

<input onclick="javascript:$(this).parent().submit();" type="submit" value=""> 

http://docs.angularjs.org/api/ng.directive:form

+1

in plain javascript:this.form.submit(); – Dharmang

+1

从什么时候开始$(this)变成普通的javascript? – Red2678

+1

@ Red2678 Ouch。 :-)在我的防守中,angular会包装一些他们称之为jQuery lite的东西,所以如果你使用angular,$(this)是有效的javascript。 –

11
  • 使用非空action属性进行角向提交表单
  • 填充action属性与当前位置(使用角度)

在你的控制器:

$scope.location = $window.location.href 

在HTML:

<form action="{{location}}"> 

plunkr demo

+3

这是对原始问题的更好回答。 – allenylzhou