ng-submit 和 ng-click 的区别答案

【问题标题】：differences between ng-submit and ng-clickng-submit 和 ng-click 的区别
【发布时间】：2014-05-08 21:41:41
【问题描述】：

在 angularjs 中，我想知道 ng-submit 和 ng-click 之间有什么区别？具体来说，每种方法的优缺点，什么时候应该选择其中一种？谢谢！
**编辑**
我对此进行了更多研究，但我仍然想知道使用 ng-submit 有什么好处（如果有的话）？您可以使用 ng-click 代替所有 ng-submits 吗？这会引起任何问题吗？再次感谢！

【问题讨论】：

两者都只是原生浏览器事件的包装器。
这是一篇有趣的帖子，可能有助于揭开这个问题的神秘面纱bit.ly/1TUTAAz

标签： angularjs submit form-submit angularjs-ng-click

【解决方案1】：

ngSubmit 指令绑定到浏览器中的submit event，在提交表单时触发。

来自 MDN：

请注意，提交仅在表单元素上触发，而不是按钮或提交输入。（提交的是表单，而不是按钮。）

因此您可以使用它来提交用户注册表单或类似的东西。

另一方面，ngClick 指令可以应用于任何类型的元素。

来自source：

ngClick 指令允许您指定自定义行为，当元素被点击。

使用它允许您的用户以某种方式与您的页面进行交互，而不是提交表单。可能是单击“上一个”或“下一个”寻呼按钮，或者可能是地图或其他东西。

【讨论】：

【解决方案2】：

除非元素具有 action、data-action 或 x-action，否则 Angular 会阻止默认操作（向服务器提交表单）指定的属性。因此，当使用没有这些属性的表单使用角度时，ng-click 和 ng-submit 可用于指定要调用的 javascript 方法。在任一调用中，您都可以获得由于角度的双向数据绑定属性，范围内的所有输入值。 您可以使用 ng-click 代替所有 ng-submits 吗？这会导致任何问题吗？
可以使用，但是使用 ng-click 时不考虑 html 输入属性（如 required、min-max、maxlength）并立即执行方法体。

【讨论】：

谢谢，这消除了误解。因此，对于提交表单，首选 ng-submit。对于任何其他交互，可以使用 ng-click。
when using ng-click it does not take html input attributes (like required,min-max,maxlength) into account and executes method body immediately............ +1 揭开这个神秘面纱！

【解决方案3】：

我最喜欢使用ng-submit 的原因是它允许您在专注于表单输入等时按下<Enter> 键，然后表单将提交。（当然假设您在表单中有一个type="submit" 按钮。）

与按钮上的ng-click 相比，它对键盘和可访问性更友好，因为使用ng-submit，用户可以单击提交按钮，也可以按<Enter>。

【讨论】：

我只是在测试这个，它似乎通过按两种方式输入来运行该功能。我认为这也是 ngSubmit 的一个好处，但从我刚才的测试来看，这两种方式的行为似乎都是一样的。
原谅我，但我不明白如果没有ng-submit，该函数如何运行。在表单上放置ng-submit 属性允许您定义当您专注于所述表单的元素之一时按下<Enter> 键时运行的函数。如果您没有 ng-submit，您将如何定义要在 <Enter> 上运行的函数？
如果将“类型”按钮更改为提交，它会做同样的事情（

【解决方案4】：

如果我们希望表单在无效时不被提交，那么我们将在表单本身上使用 ng-submit 指令而不是 ng-click 按钮

    <div class="row">
        <form name="adduser" ng-submit="AddUser(adduser.$valid)">                   
            <div id="name-group" class="form-group-lg">
                <input type="text"
                       required
                       name="name"
                       ng-model="userfullName"
                       class="form-control"
                       placeholder="Full Name">
            </div>

在 ng-submit 中，我们使用参数 formname.$valid 从控制器调用函数 AddUser。这个提交函数只会在表单有效时调用，或者换句话说，表单的所有用户输入都是有效的。请记住，在这种情况下，如果表单无效，则不会提交 from

当我们使用 ng-click 时，即使表单无效也会被提交。 ng-click 的两个观察结果如下：

即使表单无效，我们也能够提交表单对于无效输入，该值在控制器中设置为未定义

【讨论】：

【解决方案5】：

ng-submit 与表单相关联，当您提交表单时会触发此事件。 ng-click 可以在没有表单提交事件的情况下工作

【讨论】：