angular.js - 关于angularjs中调用服务的方法的问题
本文介绍了angular.js - 关于angularjs中调用服务的方法的问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
我想提交页面的表单数据，通过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="/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>
<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
<div 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>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">登陆</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="login">
<!-- <div class="login-screen">-->
<form class="login-form" name="bindingForm" ng-controller="formController" novalidate ng-submit="submitForm()">
<div 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>
</div>
<div 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>
</div>
<div 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>
</div>
<div 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>
</div>
<div 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>
</div>
<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>
<!-- </div>-->
</div>
</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注入的不对么？ 谢谢大家！
解决方案
自问自答，修改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);
}
});这篇关于angular.js - 关于angularjs中调用服务的方法的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
