Angular.js以旧方式提交

时间:2013-06-05 17:05:03

标签: html forms angularjs

我正在将旧的html页面从jQuery迁移到Angular,它包含一些带有<input type="submit">的旧式表单。当我使用ng-app指令丰富我的页面时,旧表单停止工作(我的意思是当你按下submit按钮时没有任何反应。)

我搜索了这个问题并扫描了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代码并开始使用Angular。

UPD:

我想我现在找到了原因,它是空action属性,似乎空行动不受标准欢迎,但使用非常方便,允许你将表单提交到当前页面的URL,是否有Angular方式做到了吗?

3 个答案:

答案 0 :(得分:18)

取消文档:http://docs.angularjs.org/api/ng.directive:form

Angular的理念是尽量减少数据和页面重新加载,因此他们不喜欢“旧学校表单”,但您可以通过在表单中​​使用action属性来绕过它。

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

答案 1 :(得分:11)

  • 使用非空action属性使Angular提交表单
  • 使用当前位置填充action属性(使用角度)

在您的控制器中:

$scope.location = $window.location.href

在您的HTML中:

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

请参阅plunkr demo

答案 2 :(得分:0)

我做到了这一点。我很确定我使用jquery来提交表单,但你可以使用普通的旧javascript来完成它。

角形表单页面上的一条评论暗示了这一点:

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

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