如何使用 angularJS 做类似 jQuery 的 $("#formID").submit() 事件？答案

【问题标题】：How to do something like jQuery's $("#formID").submit() event using angularJS?如何使用 angularJS 做类似 jQuery 的 $("#formID").submit() 事件？
【发布时间】：2013-09-05 05:14:25
【问题描述】：

我有一个包含一些字段的表单。当用户填写所有字段并提交表单时，我强制用户在提交表单之前注册或登录（在模式窗口中）。

也就是说，当用户尝试提交表单时，我首先打开一个带有登录表单的模式窗口（用户可以切换注册/登录表单）。用户完成登录/注册表单并提交后，我使用 ajax 发送所有数据，并在获得成功状态后，使用 jQuery 的 $("formID").submit() 事件提交上一个表单。

现在，当我从 jQuery 迁移到 angularJS 时，我试图找到使用 angularJS 的解决方案，我已经使用 angularJS 的 $http 服务 完成了用户注册/登录部分，但失败了提交以前的表单数据。

有没有针对这种事情的 angularJS 解决方案？是否可以提交带有 ID 或类似内容的表单？

【问题讨论】：

当然不是。该表单旨在直接将数据绑定到 $scope 属性。如果发布的答案对您不起作用，那么您在处理模态的代码中做了一些重大错误。我在我的应用程序中使用模式，并且使用可用的数据绑定和指令没有问题。
@m59 -- 请再读一遍我的问题...我想你还没有理解我的问题。
我发布了一个完整演示的答案（使用 div 模拟您的模态）。您需要做的就是查看提交函数上的 cmets 并使用 $http 成功回调或 MUCH BETTER 使用带有 .then() 函数的承诺。
您尚未接受答案。您的问题没有得到解答吗？
哈哈。那你能解释一下为什么吗？除非您的问题不清楚，否则我的回答准确地说明了您要做什么。我还给你写了代码，很慷慨。

标签： javascript jquery angularjs

【解决方案1】：

检查这个http://docs.angularjs.org/api/ng.directive:ngSubmit

<form ng-submit="{expression}">
   ...
</form>

【讨论】：

这不起作用，因为我正在打开表单提交的模式窗口，并且在注册/登录完成后，我实际上是在提交以前的表单数据。

【解决方案2】：

我相信我已经完成了您要求的一切。 Live demo here (click).

  <div ng-show="successMessage">
    <p>{{successMessage}}</p>
    <h6>Form data sent:</h6>
    <p ng-repeat="(k,v) in form track by k">{{k}}: {{v}}</p>
  </div>
  <form ng-submit="mySubmit()" ng-hide="modalOpen||successMessage">
    <input ng-model="form.name" placeholder="Name">
    <input ng-model="form.phone" placeholder="Phone Number">
    <input type="submit">
  </form>
  <div ng-show="modalOpen">
    <h6>This would be your modal.</h6>
    <p>Login to submit form!<p>
    <button ng-click="login()">Login</button>
  </div>

var app = angular.module('myApp', []);

app.controller('appCtrl', function($scope) {
  $scope.form = {
    name: '',
    phone: ''
  };
  $scope.modalOpen = false;
  $scope.mySubmit = function() {
    $scope.modalOpen = true; 
  };
  $scope.login = function() {
     $scope.loggedIn = true; //should come from a service and use promise, send form after promise resolves using .then()
    //dataService.sendForm() or however you want to submit the form. the same principle applies about using a promise and .then() function to set the successMessage and close modal.
    $scope.successMessage = 'Form is submitted!';
    $scope.modalOpen = false;
  };
});

【讨论】：