AngularJS:如何在 Controller 内的 onsubmit 上调用函数作为 ng-submit

Question

我正在使用 angularJS、ionic 框架和 cordova 开发移动应用程序。我有一个场景，我将表单数据提交到服务器，当服务器以 200 状态响应我时，我正在将用户导航到确认页面。我的代码是:

<ion-view title="Fill the Form" ng-controller="formSubmit">
<ion-content class="padding-vertical" ng-repeat="htmlValue in HTML">
    <form name="fieldForm" id="{{htmlValue.Id}}" method="post" onsubmit="submitFormData($(this).serialize(), $(this).attr('id'))">
        <div class="bootstrap" ng-bind-html="htmlValue.Html | unsafe">

        </div>
        <div class="padding">
            <button  class="button button-block button-calm">
                Submit
            </button>
        </div>
    </form>

    <div class="clearfix"></div>
</ion-content>

正文结束前我在index.html页面下面写的函数。

<script type="text/javascript">
    function submitFormData(serializedData,value){
        var data = serializedData;
        $.ajax({
            url: base_url+"put/putFormFilledRawData.php?id="+value,
            type: "POST",
            data: data,
            success: function(tableData){
                alert('success');
            }});
        return false;
    };
</script>

当响应到达 200 时，我必须通过 $state.go() 函数导航，为此需要在 Controller 内部访问该函数。为此，我在 onsubmit 的位置尝试了 ng-submit，但总是显示错误:submitFormData 不是函数。如何通过前 View 表单提交调用使其在 Controller 内部工作？

Answer 1

更 Angular 的做法如下:

HTML:

    <ion-view title="Fill the Form" ng-controller="formSubmit">
    <ion-content class="padding-vertical" ng-repeat="htmlValue in HTML">
        <form name="fieldForm" id="{{htmlValue.Id}}" ng-submit="submitFormData(htmlValue)">
            <div class="bootstrap" ng-bind-html="htmlValue.Html | unsafe">

            </div>
            <div class="padding">
                <button  class="button button-block button-calm">
                    Submit
                </button>
            </div>
        </form>
    <div class="clearfix"></div>
</ion-content>

Controller :

angular.module('formSubmitModule', [])
        .controller('formSubmit', ['$scope', function($scope, $http) {
          $scope.HTML = []; //Assuming you are getting the array of objects here


    $scope.submitFormData= function(formObj) {
$http({
    url: '/someUrl', 
    method: "POST",
    params: {paramA: valueA, paramB: valueB}
 });
};

(另一种 $http 服务在 URL 中传递参数)

这就是您应该如何进行 ajax 调用并在 angularJS 中发布表单数据。

附:您还可以探索由 angularjs 的 $http 服务返回的“ promise ”，而不是处理成功和错误回调。