Javascript 使用Angular JS提交常规表单

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

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

---

在
sendFormController
中

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

以及

我认为最好从角度：

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:

使用以下命令：

     <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">


谢谢，但我无法对HTML进行太多更改。它确实需要保持表单的原样，因为它是以何种方式生成的。我曾考虑过这一点，但我读到的所有内容都表明，直接在控制器中触摸DOM被认为是非常糟糕的做法，因为它将我的控制器与HTML紧密地结合在一起。如果你不修改domNo，我知道我没有修改它。但我从中选择。这意味着，如果表单的ID因任何原因发生更改，那么我必须记住去更改我的AngularJS代码。或者如果我不知道表单的ID，因为它是动态生成的呢？然后我必须将表单的ID注入到Angular中！
<div ng-controller='sendFormController">    
    <input type="text" ng-model="model.form_data" />  

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

     <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">