Angular.js 提交表单的旧方式

Posted 2023-03-05

【中文标题】Angular.js 提交表单的旧方式

【英文标题】：Angular.js submit form old way

【发布时间】：2013-06-01 12:02:57

【问题描述】：

我正在将一个旧的 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 方法吗?

【问题讨论】：

您如何提交表单？你在工作中使用 jQuery 吗？

它应该可以工作，除了动作是空的。看plnkr.co/edit/clDeu8NVLCXLh2vojjxp?p=preview

是的，这是空操作，谢谢提示

所以它现在可以工作还是你用 jQuery 提交它？

请检查问题更新，我目前正在寻找提交到同一页面的正确方法，因为在操作属性中硬编码 url 不是所需的选项。

【参考方案1】：

离开文档：http://docs.angularjs.org/api/ng.directive:form

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

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

【讨论】：

一个答案也可以回答他的问题。我一直在试图弄清楚如何使用 action 属性提交到您所在的页面，当 url 被散列时，因为它是一个用于重置密码的 url，例如。拔出一些头发后最终起作用的是action="#"

但有时您必须以传统方式提交，例如脸书重定向。你必须重新加载页面。你怎么能这样做？

另一个例子是与 Symfony 和 Angular Material 的集成。你喜欢 symfony 处理各种情况的方式，以及简洁的界面

这似乎是一个非常丑陋的 hack，知道为什么会这样吗？

【参考方案2】：

我已经做到了。我很确定我使用 jquery 来提交表单，但你可以使用普通的旧 javascript 来完成。

angular 表单页面上的其中一个 cmets 建议这样做：

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

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

【讨论】：

纯javascript：this.form.submit();

从什么时候 $(this) 变成了普通的旧javascript？？

@Red2678 哎哟。 :-) 在我的辩护中，Angular 与他们称之为 jQuery lite 的东西打包在一起，所以如果你使用 Angular，$(this) 是有效的 javascript。

【参考方案3】：

使用非空 action 属性让 Angular 提交表单 用当前位置填充action 属性（使用角度）

在您的控制器中：

$scope.location = $window.location.href

在您的 HTML 中：

<form action="location">

请参阅plunkr demo。

【讨论】：

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