Working on an angular service for a login form, I've successfully implemented authentication using a factory with an http injector to handle HTTP credentials. However, I'm facing an issue in displaying an error message when incorrect credentials are entered.
To tackle this issue, I added a div with an ng-show directive set to the value of errorAlertTextElem. The goal is to display the error message element when the $resolved status of the resource factory is false. While this mechanism works momentarily, the error message disappears quickly after being displayed when entering wrong credentials and clicking 'sign in'. I've attempted to use $scope.$apply() but since the digest is already in progress, this approach doesn't solve the problem. What am I overlooking here?
Snippet of Angular Controller code:
//Angular.js controller snippet
loriaGameControllers.controller('signinController', ['$scope', 'Users', function($scope, Users) {
$scope.signin = function() {
// 'Users' factory makes a restful resource call
var test = Users.userInfo().query(); //this returns a promise and $resolved
console.log(test);
if (test.$resolved == false) {
$scope.errorAlertTextElem = true; //Attempt to set the ng-show value to true to display the error box when needed.
}
};
}]);
Signin Form Code within the HTML (Inside ng-app):
<form class="form-signin col-md-6" role="form" name="signinForm" ng-controller="signinController">
<h2 class="form-signin-heading">Sign In</h2>
<div class="alert alert-danger" ng-show="errorAlertTextElem">Invalid Username or Password</div>
<input type="email" class="form-control" placeholder="Email address" ng-model="username" name="username" required autofocus>
<input type="password" class="form-control" placeholder="Password" ng-model="password" name="password" required>
<label class="checkbox">
<input type="checkbox" value="remember-me"> Remember me
</label>
<div class="btn btn-lg btn-primary btn-block" ng-click="signin()">Sign in</div>
</form>