Skip to main content
2 de 2
Corregido titulo codigo y ortografia
devconcept
  • 12.8k
  • 3
  • 42
  • 57

Error al actualizar vista después del login en angularjs

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>