问题描述
我想提交页面的表单数据，通过ng-submit来调用controller中注入的service的方法。但是请求的url不正确。没有调用到正确的service
页面如下：
<!DOCTYPE html><html lang='en' ng-app='binding'><head> <meta charset='UTF-8'/> <meta name='viewport' content='width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no'/> <title>Kindle Binding</title></head><!-- Loading Bootstrap --><link href='https://www.6hehe.com/css/bootstrap/css/bootstrap.min.css' rel='stylesheet'/><!-- Loading Flat UI --><link href='https://www.6hehe.com/css/flat-ui.css' rel='stylesheet'/><link href='https://www.6hehe.com/imgs/favicon.ico' rel='shortcut icon'/><script src='https://www.6hehe.com/js/lib/jquery.min.js'></script><script src='https://www.6hehe.com/js/lib/flat-ui.min.js'></script><script src='https://www.6hehe.com/js/lib/application.js'></script><script src='https://www.6hehe.com/js/lib/angular-1.3.0.js'></script><script src='https://www.6hehe.com/js/lib/angular-ui-router.js'></script><script src='https://www.6hehe.com/js/controller/bindingController.js'></script><script src='https://www.6hehe.com/js/services/request.js'></script><style> body { <!-- min-height: 2000px;-->width: 100%;height:100%;overflow-x: hidden; } .navbar-static-top {margin-bottom: 19px; }</style><script> $(function () {$(’[data-toggle=tooltip]’).tooltip();//ensure the tooltip will not display immediatly when the page opened.$(’.tooltip-hide’).tooltip(’hide’); });</script><body><p role='navigation'> <p class='container'><p class='navbar-header'> <button type='button' data-toggle='collapse' data-target='.navbar-collapse'><span class='sr-only'>Toggle navigation</span> </button> <a href='https://www.6hehe.com/wenda/14290.html#'>Kindle Pocket</a></p><p class='navbar-collapse collapse'> <ul class='nav navbar-nav navbar-right'><li><a href='https://www.6hehe.com/wenda/14290.html#'>登陆</a></li> </ul></p><!--/.nav-collapse --> </p></p><p class='login'> <!-- <p class='login-screen'>--> <form name='bindingForm' ng-controller='formController' novalidate ng-submit='submitForm()'><p class='form-group'> <input type='text' value='' placeholder='请输入手机号' name='phone' ng-model='bindingData.phone' ng-minlength='11' ng-maxlength='11' required data-placement='top' data-toggle='tooltip' /> <label for='binding-phone'></label></p><p class='form-group'> <input type='text' value='' placeholder='请输入用户名' name='userName' ng-model='bindingData.userName' ng-minlength='5' ng-maxlength='20' required data-placement='top' data-toggle='tooltip' /> <label for='binding-userName'></label></p><p class='form-group'> <input type='email' value='' placeholder='请输入个人邮箱' name='email' ng-model='bindingData.email' required data-placement='top' data-toggle='tooltip' /> <label for='binding-email'></label></p><p class='form-group'> <input type='password' value='' placeholder='请输入个人邮箱密码或授权码' name='emailPwd' ng-model='bindingData.emailPwd' required data-placement='top' data-toggle='tooltip'/> <label for='binding-emailPwd'></label></p><p class='form-group'> <input type='email' value='' placeholder='请输入kindle邮箱' name='kindleEmail' ng-model='bindingData.kindleEmail' required data-placement='top' data-toggle='tooltip' > <label for='binding-kindleEmail'></label></p><button type='submit' href='https://www.6hehe.com/wenda/14290.html#' ng-disabled='bindingForm.$invalid'>绑定！</button><a href='https://www.6hehe.com/wenda/14290.html#'>Any problem ?</a> </form> <!-- </p>--></p></body></html>
controller.js如下：
angular.module(’binding’,[’binding.services’]).controller(’formController’,function($scope,bindingDataService){ var params = $scope.bindingData; console.log(’params: ’+params); $scope.submitForm = bindingDataService.bindingData(’bindingData’,params);});
service.js如下：
angular.module(’binding.services’,[]).factory(’bindingDataService’, function($http){ console.log(’entered the service’) var bindingData = function(action, params){ return $http({ method: ’POST’, url: ’http://89e812c3.ngrok.io/KindlePocket/’+action+’’, // pass in data as strings data: $.param(params), headers : { ’Content-Type’: ’application/x-www-form-urlencoded’ } }).success(function(data,status){ console.log('success! status:'+status); alert('binding successfully!') }).error(function(data,status){ alert('binding error!') console.log('error! status:'+status); }) } return {bindingData: function(action,params){ console.log(’entered the function’) return bindingData(action,params);} }});
每次点击button总是会请求到跳转到这个页面的url。请问是什么原因呢？ 之前是把请求相关的代码直接放在controller中，没有问题。是service注入的不对么？ 谢谢大家！
问题解答
回答1：自问自答，修改controller代码如下：
angular.module(’binding’,[’binding.services’]).controller(’formController’,function($scope,bindingDataService){ $scope.bindingData = {}; var params = $scope.bindingData; console.log(’params: ’+params); $scope.submitForm = function(){bindingDataService.binding(’bindingData’,params); } });回答2：
太长了，ng-submit的用法怎么用的？
