我正在尝试编写一个向我的路由（NodeJs）发出http请求的服务，以将用户添加到数据库中。
如果我只是在控制器中编写它，那么它可以工作，但是直到刷新浏览器，您才会看到添加的用户：
我在控制器中的代码：
//Function to add a user to the db
$scope.inviteUser = function(){
$http.post('/api/users/invite', {
'email': $scope.user.email,
'role_id': $scope.user.role
}, {
headers: {
"Content-Type": "text/plain"
}
})
.success(function(data, status, headers, config) {
console.log("Successfully saved a user to the DB", data);
$scope.userInfo.push(data);
})
.error(function(data, status, headers, config) {
console.log("Failed to add user to DB");
});
}
我在服务中需要它的原因是因为堆栈上的人告诉我，它将解决我当前面临的问题，即添加用户后，直到刷新浏览器后，您才能看到它。这是因为我有一个带有邀请按钮的视图，当您单击它时会显示一个弹出窗口（md对话框->角形材质）。此对话框有其自己的tmple.html文件。在邀请按钮所在的视图中，是链接到的$ scope.userInfo（在函数invokeUser中定义-上面的代码）
使用邀请按钮和添加用户的列表的视图代码：
<div id="sidebar" class="md-whiteframe-z4" ng-data-color="">
<div style="height: 80px;"></div>
<div class="userList">
<li id="customLI" ng-repeat="user in userInfo" id="userPos" class="circular md-whiteframe-z2" style="background-color: {{ user.color }} " ng-click=" showPopUpDeletionConfirmation(); setDeleteId( user._id )" ng-data-id="{{ user._id }} ">
<p class="initials" id="userValue" style="top: {{ user.top }};" >
<custom id="user._id"></custom>
{{user.initials}}
</p>
<md-tooltip>
<!-- Delete this user --> {{user.name}}
</md-tooltip>
</li>
</div>
</div>
对话框代码：
<md-dialog aria-label="" ng-controller="CalendarCtrl">
<form name="form" >
<md-toolbar>
<div class="md-toolbar-tools">
<h1 class="customH1">Invite a user</h1>
<span flex></span>
<!-- <md-button class="md-icon-button" ng-click="closeDialog()">
<md-icon md-svg-src="images/ic_close_24px.svg" aria-label="Close dialog"></md-icon>
</md-button> -->
</div>
</md-toolbar>
<md-dialog-content>
<div id="containerForm">
<div layout="row">
<md-input-container flex="">
<div class="form-group" ng-class="{ 'has-success': form.email.$valid && submitted,'has-error': form.email.$invalid && submitted }">
<label>Enter the user's e-mail</label>
<input type="email" name="email" id="to" class="form-control" ng-model="user.email" required mongoose-error/>
<p class="help-block" ng-show="form.email.$error.email && submitted">
Doesn't look like a valid email.
</p>
<p class="help-block" ng-show="form.email.$error.required && submitted">
What's your email address?
</p>
<p class="help-block" ng-show="form.email.$error.mongoose">
{{ errors.email }}
</p>
</div>
</md-input-container>
</div>
<br /><br />
<div ng-show="form.email.$dirty && form.email.$valid">
<h5>Assign one of the following role's:</h5>
<div id="wrapperRadioButtons">
<md-radio-group ng-model="user.role">
<md-radio-button ng-repeat="userrole in roleInfo" value="{{userrole.id}}" class="md-primary">{{userrole.role}}</md-radio-button>
</md-radio-group>
</div>
</div>
<br />
</div>
</md-dialog-content>
<div class="md-actions" layout="row" >
<md-button ng-click="closeDialog()" class="md-primary">Cancel</md-button>
<md-button id="send_email" ng-click="inviteUser(); closeDialog()" class="md-primary">Invite</md-button>
</div>
</form>
</md-dialog>
这是我编写并尝试链接到邀请函数功能的服务：
zazzleApp.factory('UserService', ['$q', '$http', function ($q, $http) {
var service = {};
service.get = function() {
var deferred = $q.defer();
deferred.resolve(service.data);
return deferred.promise;
}
service.save = function(data) {
var promise = $http({
method: 'POST',
url: 'api/users/invite'
})
var deferred = $q.defer();
service.data.push(data);
deferred.resolve();
return deferred.promise;
}
return service;
}
]);
我的控制器的一部分：
angular.module('zazzleToolPlannerApp')
.controller('CalendarCtrl', function ($scope, $mdDialog, $http, $rootScope, $timeout, User, Auth, UserService) {
//Function to add a user to the db
$scope.inviteUser = function(){
var obj = {
'email': $scope.user.email,
'role_id': $scope.user.role
};
UserService.save(obj).then(function(){
$scope.getUsers();
})
}
});
现在，当我尝试添加用户时，在控制台中出现错误-> https://gyazo.com/34b39d7eda18b8afd9ef11094b4f429a
所以基本上我要问的是如何编写一个发出http请求并将其链接到控制器的服务..
旁注：我以前从未做过这，所以这就是为什么它可能行不通的原因。
最佳答案
在控制台中收到错误的原因是因为service.data.push(data);中的service.data不存在。您的意思可能是将新用户推送到尚未创建的用户数组中（您似乎对代码：P中的“数据”感到困惑）。
无论如何，针对您的问题的解决方案要简单得多：
在服务中，您可以将$ http.post（）返回给控制器，并在控制器上通过.success（）回调处理请求。此外，您需要更新的用户列表应位于服务中，并从控制器绑定到该服务；这样，它将在您添加新用户后保持模板更新，而无需刷新浏览器。您只需要从服务中检索$ http回调上的用户列表。
如果您仍然感到困惑，我可以写一个小提琴。
编辑：这是小提琴：http://jsfiddle.net/bosch/8pnL23k7/。希望它将帮助您更好地理解概念
关于javascript - Angular的HTTP请求服务抛出错误，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31851236/