[英]Http request service with Angular throwing an error
我正在尝试编写一个向我的路由(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请求并将其链接到控制器的服务....
旁注:我以前从未做过这,所以这就是为什么它可能无法正常工作的原因。
我所看到的是在您的日志中显示
typeError无法读取object.service.save中未定义的属性“ push”
我认为这与您的HTTP请求没有任何关系。 您尚未定义service.data.push(data);
那就是他倾倒的地方
在将值推入service
对象之前,尝试将service
对象的data
属性定义为一个数组(它尚不知道它是一个数组,因此它无法访问该数组的原型函数)
做这个
service = { data: [] };
希望这对您有所帮助。
你在控制台中的错误的原因是因为在service.data service.data.push(data);
不存在。 您的意思可能是将新用户推入尚未创建的用户数组中(您似乎对代码:P中的“数据”感到困惑)。
无论如何,解决问题的方法要简单得多:在服务中,您可以将$ http.post()返回给控制器,并在控制器上通过.success()回调处理请求。 此外,您需要更新的用户列表应位于服务中,并从控制器绑定到该服务; 这样,它将在您添加新用户后保持模板更新,而无需刷新浏览器。 您只需要从服务中检索$ http回调上的用户列表。
如果您仍然感到困惑,我可以写一个小提琴。
编辑 :这是小提琴: http : //jsfiddle.net/bosch/8pnL23k7/ 。 希望它将帮助您更好地理解概念
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.