Estoy haciendo un módulo de usuarios en Angular JS. Al momento de hacer un login equivocado, quiero mostrar una alerta de Bootstrap que diga que la contraseña o usuario están equivocadas.
El mensaje llega hasta el controller de angular pero no actualiza la vista. Ya intente con la funcion $apply
, pero arroja un error que dice apply ya esta en ejecución.
Aquí muestro el Controller:
angular.module("login")
.controller('loginController',function($scope,$http,LocalStore,jwtHelper,$location,authFactory){
$scope.jwt = LocalStore.getJWT();
$scope.error;
if(authFactory.isLogIn()){
$location.path("/home");
}
$scope.logIn = function(user){
authFactory.logIn(user);
$scope.error = authFactory.getError();
};
$scope.logOut = function(){
console.log($scope.error);
$scope.error = authFactory.getError();
};
});
A continuación muestro el Factory que hice para validar los logins
.factory("authFactory", function($http, LocalStore, $location, jwtHelper){
var authFactory = {};
authFactory.errores="-";
authFactory.logIn = function(user){
$http({
method: 'POST',
skipAuthorization: true,
url: 'login.php',
data: { op:'login', username: user.username, password: user.password } ,
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).then(function successCallback(response) {
console.log("Entrando al success");
if('jwt' in response.data){
console.log("Login Exitoso");
LocalStore.saveJWT(response.data.jwt);
}else if('error' in response.data){
console.log("Login Erroneo");
authFactory.errores = response.data.error;
console.log("Imprimiendo authFactory: " + authFactory.errores);
};
if(authFactory.isLogIn){
$location.path("/home");
}else{
$location.path("/login");
}
}, function errorCallback(response) {
console.log("Login Fallido jajajajaj");
});
};
authFactory.getError=function(){
console.log("Obteniendo AuthFactory en get Error: "+ authFactory.errores);
return authFactory.errores;
};
Este es el template del login:
<div class="row">
<div class="col-sm-4">
<div class="alert alert-success" role="alert" ng-show="error">
<strong>Well done!</strong> {{error}}.
</div>
</div>
<div class="col-sm-4" align="center">
<input type="text" ng-model="user.username" placeholder="Username" class="form-control form-group">
<input type="password" ng-model="user.password" placeholder="Password" class="form-control form-group">
<button class="btn btn-primary btn-large form-group" ng-click="logIn(user)">Log In</button>
</div>
<div class="col-sm-4"></div>
</div>