使用 Angular JS 提交常规表单答案

【问题标题】：Submit regular form using Angular JS使用 Angular JS 提交常规表单
【发布时间】：2014-12-10 02:23:08
【问题描述】：

我有一个普通的 HTML 表单，其中包含已经在 Angular 控制器中定义的输入、操作等。但是，此表单没有提交按钮。相反，它在表单之外的页面上其他地方有一个按钮，但是当单击时应该触发正常的表单提交过程。 换句话说，让外部按钮像普通的提交按钮一样工作。

例如（我所拥有的非常简化的版本），

<div ng-controller='sendFormController">
    <form name='my_form' action='/path/to/form_handler.php' method="POST">
        <input type="text" name="form_data" />
    </form>

    <button ng-click='submitForm()">Send Data</button>
</div>

我一直在寻找这个问题的解决方案，但我能找到的唯一解决方案（这对我的思维方式有点生硬）包括，

有一个隐藏的提交按钮，按下外部按钮即可触发。
具有在按下外部按钮时执行 $http.post() 等的代码。我不想在函数中重复动作、组装参数等。

我假设 Angular 中必须有一种方法可以简单地触发表单的提交，但我在文档中找不到它。谁能指出我所缺少的方向？

【问题讨论】：

标签： javascript angularjs forms

【解决方案1】：

在sendFormController，

$scope.submitForm = function() {
    document.getElementById('my_form').submit(); //force to submit the form after clicking the button
}

还有，

<form name='my_form' id='my_form' action='/path/to/form_handler.php' method="POST">

【讨论】：

我认为这是一种选择，但我读到的所有内容都表明直接在控制器中触摸 DOM 被认为是一种非常糟糕的做法，因为它将我的控制器与 HTML 紧密耦合。
你没有修改 dom
不，我知道我没有修改它。但我正在从中选择。这意味着如果表单的 ID 因任何原因发生更改，那么我必须记得去更改我的 AngularJS 代码。或者如果我不知道表单的 ID 因为它是动态生成的怎么办？然后我必须将表单的 ID 注入到 Angular 中！

【解决方案2】：

我认为最好以有角度的方式来做：

app.controller('sendFormController', function($scope) {
       $scope.model = { 
          form_data: ''
       };

       $scope.submitForm = function () {
          $http({
              url: '/path/to/form_handler.php',
              method: "POST",
              data: $.param($scope.model),
              headers: {
                'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
              }
          });
        };
});

html:

<div ng-controller='sendFormController">    
    <input type="text" ng-model="model.form_data" />  

    <button ng-click='submitForm()">Send Data</button>
</div>

【讨论】：

谢谢，但我无法更改 HTML。由于它的生成方式，它确实需要保持原样。

【解决方案3】：

使用这个：

     <form onsubmit='this.submit()' name='my_form' action='/path/to/form_handler.php' method="POST">

或以更“角度”的方式：

     <form #form (submit)='form.submit()' name='my_form' action='/path/to/form_handler.php' method="POST">

【讨论】：