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

Como Error al actualizar vista con variabledespués del Factorylogin en Angular JS?angularjs

Estoy haciendo un modulomó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$apply, pero arroja un error que dice apply ya esta en ejecución.

AquiAquí 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();
        };

    });
.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;
    };
<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>

Como actualizar vista con variable del Factory en Angular JS?

Estoy haciendo un modulo de usuarios en Angular JS... Al momento de hacer un login equivocado, quiero mostrar una alerta 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.

Aqui 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();
};

});
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;
    };
<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>

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();
        };

    });
.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;
    };
<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>
Origen Enlace

Como actualizar vista con variable del Factory en Angular JS?

Estoy haciendo un modulo de usuarios en Angular JS... Al momento de hacer un login equivocado, quiero mostrar una alerta 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.

Aqui 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>