Angular.js：表单提交操作未调用答案

【问题标题】：Angular.js : on form submit action is not callingAngular.js：表单提交操作未调用
【发布时间】：2016-10-30 14:46:08
【问题描述】：

我正在尝试在 ng-submit 事件中提交表单，但表单提交不起作用。 $http,$state,dtoResource 是注入其中 dtoResource 是修改 json 数据的工厂。

我的代码如下

index.html

<!DOCTYPE html>
<html  ng-app="autoQuote">
<head lang="en">
    <meta charset="UTF-8">
    <title>Angular Js DTO mgnt</title>

    <!-- Style sheets -->
    <link href="css/bootstrap.css" rel="stylesheet"/>
    <link href="css/app.css" rel="stylesheet"/>

    <!-- Library Scripts -->
    <script src="js/jquery.js"></script>
    <script src="js/angular.js"></script>   
    <script src="js/angular-ui-router.js"></script>
    <!-- Application Script -->
    <script src="app/app.js"></script>  

    <!-- Services -->
    <script src="common/services/common.services.js"></script>
    <script src="common/services/dtoResource.js"></script>  

    <!-- Controllers -->
    <script src="app/ctrl/autoQuoteCtrl.js"></script>
    <script src="app/ctrl/questionsCtrl.js"></script>

</head>

<body>
    <ul>
      <li><a href="#/">step 1</a>
      <li><a href="#/step2">step 2</a>
    </ul>
    <div class="container"> 


    <div ui-view=""></div>


    </div>
</body>

</html>

step1.html

电子邮件：

autoQuoteCtrl.js

(function () {
    "use strict";

    angular
    .module("autoQuote")
    .controller("autoQuoteCtrl", ["$http","$state","dtoResource",autoQuoteCtrl]);

    function autoQuoteCtrl($http,$state,dtoResource) {
        console.log('We are in form');
        //self = this;
        // if valid (check form validate true)
        //console.log(dtoResource);
        //call function from your service, and do something with it
        dtoResource.rc1Step1DTO();

        $http({
            method  : 'POST',
            url     : 'api.php',
            data    : { dtoObj: JSON.stringify(prepareAutoQuoteDTO.postAutoQuoteObj) }, // pass in data as strings
            headers : { 'Content-Type': 'application/x-www-form-urlencoded' }  // set the headers so angular passing info as form data (not request payload)
        })
        .success(function(data) {
            console.log(data);
            if (!data.success) {

            } else {
              // if successful, bind success message to message
              //$scope.message = data.message;
            }
        });
    }

}());

dtoResource.js

(function () {
    "use strict";

    angular
        .module("autoQuote")
        .factory("dtoResource",
                ["$resource",
                 dtoResource]);

console.log('inside dtoResource');
    function dtoResource(){
    var prepareAutoQuoteDTO = {
        postAutoQuoteObj         : $.getAutoQuoteObject(),  
        initializeDriverObj: function(){
            var driverLocObj           = new Driver();
            driverLocObj.PersonInfo    = new PersonInfo();
            driverLocObj.DriverLicense = new DriverLicense();
            driverLocObj.Incident      = new Incident();
            return driverLocObj;
       },
       initializeAppInfo: function(){
           var appInfoLocObj           = new ApplicationInfo();
           appInfoLocObj.Discount      = new Discount();
           return appInfoLocObj;
       },
       /*
       * Initialize Vehicle object for autoQuoteDTO.js
       */
       initializeVehicleObj: function(){
           var vehicleLocObj = new Vehicle();
           return vehicleLocObj;
       },
       /*
       * store session info
       */
       rc1Step1DTO: function(){

            var emailId = $('#save_quote_email').val();
            if (typeof emailId  !== "undefined" && emailId && emailId != '' && emailId != 'Email Address'){
                var email           = new Email();
                email.EmailTypeCd   = 'PRIMARY';
                email.EmailAddress  = emailId;
                this.postAutoQuoteObj.ApplicationInfo.GeneralPartyInfo.ContactInfo =     this.postAutoQuoteObj.ApplicationInfo.GeneralPartyInfo.ContactInfo || new Contact();
                this.postAutoQuoteObj.ApplicationInfo.GeneralPartyInfo.ContactInfo.Emails = [];
                this.postAutoQuoteObj.ApplicationInfo.GeneralPartyInfo.ContactInfo.Emails.push(email);
            }
        }
    };
    return prepareAutoQuoteDTO;
}

}());

【问题讨论】：

我认为 ng-submit 使用函数 ng-submit="submit()" 检查 DOCS docs.angularjs.org/api/ng/directive/ngSubmit

标签： javascript jquery angularjs forms

【解决方案1】：

您必须为父 DOM 元素添加 ng-app 和 ng-controller 属性。

你不能在ng-submit 中调用控制器的实例：）

您应该在控制器中添加特殊方法，然后调用该方法。像这样的

<body ng-app>
 <div ng-controller="autoQuoteCtrl">
  <form ng-submit="onSubmit()">
   ...
  </form>
 </div>
</body>

你的控制器是这样的

 angular
    .module("autoQuote")
    .controller("autoQuoteCtrl", ["$http","$state","dtoResource", function($http, $state, dtoResource) {
    $scope.onSubmit = function() {
     alert('hi, I was invoked on form submit');
    };
}]);

PS：在这个例子中，我使用了 co 称为范围汤。这很容易理解，但它使用附加属性将 $scope 聚集在一起。现在不推荐这种方法。在此处阅读更好的方法：http://www.technofattie.com/2014/03/21/five-guidelines-for-avoiding-scope-soup-in-angular.html

更新

您的代码有些混乱：路由重定向到/，被questionsCtrl捕获，但相关模板有属性ng-controller=autoQuoteCtrl。那么应该使用哪个控制器来响应用户操作？不确定这是不是有意的:)

解决方案

提交函数应该是这样调用的

  <form ng-submit="onSubmit()">

我忘记了第一个示例中的()，抱歉:)

【讨论】：

有没有办法在不使用
的情况下提交表单
@Greatym.com 恐怕不会。 AngularJs 劫持
并将其重新实现为核心指令。如果你想使用标准形式，那么你可能不得不放弃 Angular。（至少据我所知）
我按照建议更新了 step1.php 文件，但出现错误 Error: [$injector:unpr] Unknown provider: $resourceProvider
表示没有找到dtoResource。检查它是否以角度注册。与注册控制器和模块类似。像这样：angular .module("autoQuote") .service("dtoResource", [dependencies...])
我暂时删除了这个 dtoResource。更新文件，代码如下，但点击保存按钮时没有发生任何事件。

【解决方案2】：

html

   <div ng-controller="formCtrl">
            <form  name="userForm"  class="well form-search"   >

                <input type="text" ng-model="name" class="input-medium search-query" placeholder="Name" required >
                <input type="email" ng-model="email" class="input-medium search-query" placeholder="Email" required >
                <input type="text" ng-model="message" class="input-medium search-query" placeholder="Message" required >
                <button type="submit" class="btn" ng-click="formsubmit(userForm.$valid)"  ng-disabled="userForm.$invalid">Submit </button>

            </form>
            <pre ng-model="result">
                {{result}}
            </pre>
        </div>

js文件

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

app.controller("formCtrl", ['$scope', '$http', function($scope, $http) {
        $scope.url = 'submit.php';

        $scope.formsubmit = function(isValid) {


            if (isValid) {


                $http.post($scope.url, {"name": $scope.name, "email": $scope.email, "message": $scope.message}).
                        success(function(data, status) {
                            console.log(data);
                            $scope.status = status;
                            $scope.data = data;
                            $scope.result = data; // Show result from server in our <pre></pre> element
                        })
            }else{

                  alert('Form is not valid');
            }


        } }]);

click here

【讨论】：

得到错误错误：[$injector:unpr] 未知提供者：$resourceProvider