angular directive auth all the logic in the service - angularjs

Question

I should manage a directive for a login
form because of append a msg just in case
the credentials are wrong so I end up with:
HTML
<form role="form" name="form" data-auth="" data-ng-submit="getAuth()" class="form-signin">
<h2 class="form-signin-heading">Please sign in</h2>
<input type="text" name="email" placeholder="Email address" required="required" autofocus="autofocus" data-ng-model="user.email" class="form-control">
<input type="password" name="password" placeholder="Password" required="required" data-ng-model="user.password" class="form-control">
<label class="checkbox">
<input type="checkbox" value="remember-me">Remember me
</label>
<input type="submit" value="Sign in" data-ng-disabled="form.$invalid" class="btn btn-lg btn-primary btn-block">
</form>
JS
.factory('Auth', function($http,$q,$window) {
return {
send : function(data){
var deferred = $q.defer();
$http.post('/user/auth',data)
.success(function (response) {
deferred.resolve(response);
})
.error(function(data, status, headers, config) {
deferred.reject([]);
});
return deferred.promise;
},
authenticate:function(data){
}
}
})
.controller('MainCtrl', function ($scope,Auth) {
$scope.user = {};
})
.directive('auth',function($window,Auth) {
return {
restrict: 'A',
controller: function($scope,$element) {
$scope.getAuth = function(){
Auth.send($scope.user).then(
function(response){
if( (typeof response.data !== 'undefined') && (response.data === $scope.user.email)){
$window.location.href = 'http://localhost:3000/admin';
}
},
function(reject){
$('#invalid-login').remove();
$element.prepend('<p id="invalid-login" class="text-danger text-center">Invalid login</p>');
}
);
};
}
};
});
I'd like to put all the logic in the service
but I don't find the way ^^
EDIT
.factory('Auth', function($http,$q,$window) {
return {
send : function(data){
var deferred = $q.defer();
$http.post('/user/auth',data)
.success(function (response) {
deferred.resolve(response);
})
.error(function(data, status, headers, config) {
deferred.reject([]);
});
return deferred.promise;
},
authenticate:function(data,callBackOnError){
this.send(data).then(
function(response){
if( (typeof response.data !== 'undefined') && (response.data === data.email)){
$window.location.href = 'http://localhost:3000/admin';
}
},
callBackOnError
);
}
}
})
.controller('MainCtrl', function ($scope,Auth) {
$scope.user = {};
})
.directive('auth',function($window,Auth) {
return {
restrict: 'A',
controller: function($scope,$element) {
$scope.getAuth = function(){
Auth.authenticate(
$scope.user,
function(reject){
$('#invalid-login').remove();
$element.prepend('<p id="invalid-login" class="text-danger text-center">Invalid login</p>');
}
);
};
}
};
});
not so bad ^^

Answer 1

Change your HTML such that your call to getAuth has the user as parameter
<form role="form" name="form" data-auth="" data-ng-submit="getAuth(user)" class="form-signin">
<h2 class="form-signin-heading">Please sign in</h2>
<input type="text" name="email" placeholder="Email address" required="required" autofocus="autofocus" data-ng-model="user.email" class="form-control">
<input type="password" name="password" placeholder="Password" required="required" data-ng-model="user.password" class="form-control">
<label class="checkbox">
<input type="checkbox" value="remember-me">Remember me
</label>
<input type="submit" value="Sign in" data-ng-disabled="form.$invalid" class="btn btn-lg btn-primary btn-block">
Change your service such that it includes the getAuth function:
.factory('Auth', function($http,$q,$window) {
return {
send : function(data){
var deferred = $q.defer();
$http.post('/user/auth',data)
.success(function (response) {
deferred.resolve(response);
})
.error(function(data, status, headers, config) {
deferred.reject([]);
});
return deferred.promise;
},
authenticate:function(data){
},
getAuth: function(user){
send(user).then(
function(response){
if( (typeof response.data !== 'undefined') && (response.data === $scope.user.email)){
$window.location.href = 'http://localhost:3000/admin';
}
},
function(reject){
$('#invalid-login').remove();
$element.prepend('<p id="invalid-login" class="text-danger text-center">Invalid login</p>');
}
);
}
}
})
And finally change the controller like that:
.controller('MainCtrl', function ($scope,Auth) {
$scope.user = {};
$scope.getAuth = Auth.getAuth;
})