javascript - Angular.js : on form submit action is not calling -
i trying submit form on ng-submit event form submit not working. $http,$state,dtoresource injections dtoresource factory modify json data.
my code below
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
email:autoquotectrl.js
(function () { "use strict"; angular .module("autoquote") .controller("autoquotectrl", ["$http","$state","dtoresource",autoquotectrl]); function autoquotectrl($http,$state,dtoresource) { console.log('we in form'); //self = this; // if valid (check form validate true) //console.log(dtoresource); //call function service, , dtoresource.rc1step1dto(); $http({ method : 'post', url : 'api.php', data : { dtoobj: json.stringify(prepareautoquotedto.postautoquoteobj) }, // pass in data strings headers : { 'content-type': 'application/x-www-form-urlencoded' } // set headers angular passing info form data (not request payload) }) .success(function(data) { console.log(data); if (!data.success) { } else { // if successful, bind success message 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 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; } }());
you have add ng-app , ng-controller attributes parent dom elements.
and can not invoke controller's instance in ng-submit :)
you should add special method in controller, , call one. this
<body ng-app> <div ng-controller="autoquotectrl"> <form ng-submit="onsubmit()"> ... </form> </div> </body> and controller this
angular .module("autoquote") .controller("autoquotectrl", ["$http","$state","dtoresource", function($http, $state, dtoresource) { $scope.onsubmit = function() { alert('hi, invoked on form submit'); }; }]); ps: in example using co called scope soup. simple understand clusters $scope additional properties. not recommended approach now. read better approach here: http://www.technofattie.com/2014/03/21/five-guidelines-for-avoiding-scope-soup-in-angular.html
update
you have slight confusion in code: route redirected /, caught questionsctrl, relevant template had attribute ng-controller=autoquotectrl. controller should used respond user action?? not sure if intended :)
solution
the submit function should have been called this
<form ng-submit="onsubmit()"> i forgot () in first example, sorry :)
Comments
Post a Comment