Saya ingin menyerahkan data borang halaman dan memanggil kaedah perkhidmatan yang disuntik dalam pengawal melalui ng-submit. Tetapi url yang diminta tidak betul. Perkhidmatan yang betul tidak dipanggil
Halaman tersebut adalah seperti berikut:
<!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="/css/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Loading Flat UI -->
<link href="/css/flat-ui.css" rel="stylesheet"/>
<link href="/imgs/favicon.ico" rel="shortcut icon"/>
<script src="/js/lib/jquery.min.js"></script>
<script src="/js/lib/flat-ui.min.js"></script>
<script src="/js/lib/application.js"></script>
<script src="/js/lib/angular-1.3.0.js"></script>
<script src="/js/lib/angular-ui-router.js"></script>
<script src="/js/controller/bindingController.js"></script>
<script src="/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 class="navbar navbar-default navbar-static-top" role="navigation">
<p class="container">
<p class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
</button>
<a class="navbar-brand" href="#">Kindle Pocket</a>
</p>
<p class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">登陆</a></li>
</ul>
</p><!--/.nav-collapse -->
</p>
</p>
<p class="login">
<!-- <p class="login-screen">-->
<form class="login-form" name="bindingForm" ng-controller="formController" novalidate ng-submit="submitForm()">
<p class="form-group">
<input type="text" class="form-control login-field tooltip-hide" value="" placeholder="请输入手机号"
id="binding-phone" name="phone" ng-model="bindingData.phone" ng-minlength="11" ng-maxlength="11"
required data-placement="top" data-toggle="tooltip"
title="**"/>
<label class="login-field-icon fui-user" for="binding-phone"></label>
</p>
<p class="form-group">
<input type="text" class="form-control login-field tooltip-hide" value="" placeholder="请输入用户名"
id="binding-userName" name="userName" ng-model="bindingData.userName" ng-minlength="5" ng-maxlength="20"
required data-placement="top" data-toggle="tooltip"
title="**"/>
<label class="login-field-icon fui-user" for="binding-userName"></label>
</p>
<p class="form-group">
<input type="email" class="form-control login-field tooltip-hide" value="" placeholder="请输入个人邮箱"
id="binding-email" name="email"
ng-model="bindingData.email" required data-placement="top" data-toggle="tooltip"
title="**"/>
<label class="login-field-icon fui-mail" for="binding-email"></label>
</p>
<p class="form-group">
<input type="password" class="form-control login-field tooltip-hide" value="" placeholder="请输入个人邮箱密码或授权码"
name="emailPwd"
id="binding-emailPwd" ng-model="bindingData.emailPwd" required data-placement="top"
data-toggle="tooltip" title="**"/>
<label class="login-field-icon fui-lock" for="binding-emailPwd"></label>
</p>
<p class="form-group">
<input type="email" class="form-control login-field tooltip-hide" value="" placeholder="请输入kindle邮箱"
id="binding-kindleEmail" name="kindleEmail" ng-model="bindingData.kindleEmail" required
data-placement="top" data-toggle="tooltip"
title="**">
<label class="login-field-icon fui-mail" for="binding-kindleEmail"></label>
</p>
<button class="btn btn-primary btn-lg btn-block" type="submit" href="#" ng-disabled="bindingForm.$invalid">绑定！</button>
<a class="login-link" href="#">Any problem ?</a>
</form>
<!-- </p>-->
</p>
</body>
</html>controller.js adalah seperti berikut:
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 adalah seperti berikut:
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);
}
}
});Setiap kali anda mengklik butang, anda akan sentiasa meminta url yang melompat ke halaman ini.
Apakah sebabnya? Sebelum ini, kod berkaitan permintaan diletakkan terus dalam pengawal, dan tiada masalah. Salahkah perkhidmatan menyuntiknya? Terima kasih semua!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Tanya dan jawab soalan anda sendiri, ubah suai kod pengawal seperti berikut:
Ia terlalu panjang. Bagaimana cara menggunakan ng-submit?