Question

我正在开发angularJS，离子框架和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（）函数导航，并且为此需要在控制器内访问此函数。为此，我在onsubmit的地方尝试了ng-submit，但总是向我显示错误：submitFormData不是函数。如何让它在前面的控制器内工作表单提交调用？

Answer 1

更有棱角的做法是：

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>

控制器：

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中的参数）

这是你应该如何在angularJS中进行ajax调用和POST表单数据。

P.S。您还可以探索承诺＆＃39;由angularjs的$ http服务返回，而不是处理成功和错误回调。

Answer 2

查看ng-submit

的文档

您需要创建一个控制器或一个指令，并将该函数绑定到$ scope。

Answer 3

检查以下示例

<script>
    angular.module('submitExample', [])
        .controller('ExampleController', ['$scope', function($scope) {
          $scope.list = [];
          $scope.text = 'hello';
          $scope.submit = function() {
            if ($scope.text) {
              $scope.list.push(this.text);
              $scope.text = '';
            }
          };
        }]);
    </script>


<form ng-submit="submit()" ng-controller="ExampleController">
  Enter text and hit enter:
  <input type="text" ng-model="text" name="text" />
  <input type="submit" id="submit" value="Submit" />
  <pre>list={{list}}</pre>
</form>

AngularJS：如何在控制器内调用onsubmit上的函数作为ng-submit

3 个答案: