Servicestack + model binding on json post using AngularJs - rest

Question

I'm calling a REST service developed in serviceStack, I'm using angularJs as a client but my problem is that for some reason I can't bind my json model with my requestDTO.
my angularJs code:
I have a AngularJs Service
angular.module('mseApp.services', ['ngResource']).
factory('loginService',
function ($resource) {
return $resource('/Api/User/login', '',
{
query: {
method: 'POST',
params:{ }
}
});
});
controller:
function loginCtrl($scope, loginService) {
$scope.submit = function () {
var user = loginService.query({loginRequest:$scope.loginRequest});
};
}
View:
<div>
<div ng-model="loginRequest">
<form ng-submit="submit()" ng-controller="loginCtrl">
<input id="username" ng-model="loginRequest.Username" type="text" name="text" />
<input id="password" ng-model="loginRequest.Password" type="text" name="text" />
<input type="submit" id="submit" value="Submit" />
<span ng-model="Username"></span>
</form>
</div>
</div>
on the dot net side
my DTO
public class LoginRequest
{
public string Username { get; set; }
public string Password { get; set; }
}
public UserResponse Post(LoginRequest loginRequest)
{
}
everything if fine the only problem is that LoginRequest is null on my service method.
Any ideas???

Answer 1

Just send
query($scope.loginRequest)
instead of
query({loginRequest:$scope.loginRequest})
that will solve your issue.

Answer 2

You can also utilize the $promise object of your query to defer processing of your binding to $scope
function loginCtrl($scope, loginService) {
$scope.submit = function () {
var user = loginService.query.$promise.then(function (promise) {
$scope.userResponse = promise.d;
});
};
}
then bind to (assuming your Username is at UserResponse.Username) like this
<span ng-model="UserResponse.Username"></span>