簡體   English   中英

Angular.js:在表單上的提交操作未調用

[英]Angular.js : on form submit action is not calling

我正在嘗試在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")
        .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;
}

}());

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-appng-controller屬性添加到父DOM元素。

而且您不能在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:在此示例中,我使用的是合並范圍湯。 理解起來很簡單,但是它會將$ 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()">

我在第一個示例中忘記了() ,對不起:)

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');
            }


        } }]);

點擊這里

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM