Execution is not going inside a function in a angularjs controller

Question

I have a problem in calling a function checkLogin of a controller. I am using the value returned by checkLogin to hide/show with ng-show. When i check by debugging the execution is happening until function call and later on it is just skipping to execute that function so i am not getting any thing in return please see the following code and let me know if anything is wrong out here..

The function i am calling is checkLogin() from the LoginController please observe that function

Angular Module

'use strict';

var mainApp=angular.module('MainModule',['ngRoute']);
mainApp.constant('encrypt','');
mainApp.config(function($routeProvider){
$routeProvider.when("/",{
    templateUrl : "index.html",
    controller : 'LoginController'
})
.when("/loginpage",{
    templateUrl : "ataclient/login/loginpage.html",
    controller : 'LoginController'})
.when("/registration",{
    templateUrl: "ataclient/register/register.html",
    controller: 'RegistrationController'
});
});

Angular Controller

   'use strict';

    function LoginController(encrypt,$http,$scope,$location){

        $scope.userName = "";
        $scope.password ="";
        $scope.loginstatus=true;
        $scope.data="";
        $scope.loginSubmit = function(){
            alert("inside login submit");
            if($scope.userName && $scope.password){ 
                $http({
                    url:'http://localhost:8080/com/rest/user/login',
                    method:"POST",
                    headers:{
                        'Content-Type':'application/json'
                    },
                    data : {
                        "userName" : $scope.userName,
                        "passwd" : $scope.password
                    }
                }).then(function(response){$scope.data = response;});
                if($scope.data.data.encryptedkey != null ){
                    encrypt = $scope.data.data.encryptedkey ;
                    $scope.loginstatus = false;
                    console.log($scope.loginstatus);
                    alert(encrypt);
                }
            }
        };
        $scope.checkLogin = function(){
            alert("inside checkLogin");
            if(encrypt != null){
                return false;
            }
            else
                {
                return true;
                }
        };

        this.login=function(){
            alert("for u in sss");
            $http({
                url:'http://localhost:8080/com/browsers',
                method:"GET",
                headers:{
                    'Content-Type':'application/json',
                    'SessionId': 1478785782179
                }
            }).
            then(function(Response){$scope.data=Response;});
        };
    }

    LoginController.$inject = ['encrypt','$http' ,'$scope','$location'];

    mainApp.controller('LoginController', LoginController);

and the html piece of code using to call is html piece

     <form  ng-submit="loginSubmit()" ng-controller = "LoginController">

            <div class="col-md-12  col-lg-12 col-xl-12 text-center" id="logintitle">Login Here</div> 

            <div class="col-md-offset-2 col-md-8 col-md-offset-2  col-lg-offset-2 col-lg-8 col-lg-offset-2   col-xl-offset-2 col-xl-8 col-xl-offset-2 form-group">
                <label for="UserName"> User Name</label>
                <input type="UserName" ng-model="userName" placeholder="Enter UserName" class="form-control" id="username" aria-describedby="UserNamehelp">
            </div>
            <div class="col-md-offset-2 col-md-8 col-md-offset-2  col-lg-offset-2 col-lg-8 col-lg-offset-2   col-xl-offset-2 col-xl-8 col-xl-offset-2 form-group">
                <label for="UserName"> User Name</label>
                <input type="Password" ng-model="password" placeholder="Enter Password" class="form-control" id="password" aria-describedby="PassWordHelp">
            </div>
            <div class="col-md-offset-2 col-md-4 col-lg-offset-2 col-lg-4 col-xl-offset-2 col-xl-4">
                <button ng-show ="checkLogin()" type="submit" class="btn btn-primary" id="submit">Submit {{data.data.encryptedkey}}</button>
            </div>
            <div class="col-md-4 col-md-offset-2 col-lg-4 col-lg-offset-2 col-xl-4 col-xl-offset-2 ">
                <button type="submit" class="btn btn-primary" id="forgot">forgot</button>
            </div>
     </form>

Duncan · Accepted Answer · 2016-11-18 09:13:45Z

2

Check your javascript console for errors. In fact replace all those alert() and console.log() calls with $log.debug() calls.

I think your problem is the line:

if($scope.data.data.encryptedkey != null ){

This line is not inside the success handler for $http so it will be executed immiediately, before you have assigned anything to $scope.data which means you will get an error when you try to access "".data.encryptedkey. Then when the data arrives you do nothing with the resulting assignment to $scope.data.

Move that if inside the success function, and also add in a handler for when the call fails.

$http({
    url:'http://localhost:8080/com/rest/user/login',
    method:"POST",
    headers:{
        'Content-Type':'application/json'
    },
    data : {
        "userName" : $scope.userName,
        "passwd" : $scope.password
    }
}).then(successFn);

function successFn (response){
    $scope.data = response;
    if($scope.data.data.encryptedkey != null ){
         encrypt = $scope.data.data.encryptedkey ;
         $scope.loginstatus = false;
    }
}

The checkLogin() function will only be called when angular realises that something has changed. It should be called once when the $http request completes, but as your code isn't setting encrypt at that point it will still return false. After that, unless something else changes there is no reason for angular to call it again.

Actually you would be better to set a flag in the model and check that directly from the html rather than calling a function each time. Avoid calling functions from directives whenever possible as they get called every time anything changes: if you can pre-compute the result and just store that it will usually be better.

edited Nov 18, 2016 at 9:13

answered Nov 18, 2016 at 8:00

Duncan

96.4k15 gold badges129 silver badges160 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sud Over a year ago

Hi Duncan, my problem is not with the "loginSubmit" function it is with the "checkLogin()" function..the execution is not going inside this function ....if what you said is related to "checkLogin()" fucntion then please elobarate it ..

Duncan Over a year ago

@Sud, I've elaborated. You need to fix the problem I pointed out and then see if your function gets called.

jkris · Accepted Answer · 2016-11-18 08:40:45Z

You are assigning a value to the constant provider encrypt

mainApp.constant('encrypt','');
...
if($scope.data.data.encryptedkey != null ){
  encrypt = $scope.data.data.encryptedkey;
...

The name of the provider implies it should not be changed, I would suggest using the value provider instead.

Your real problem, as Duncan has mentioned, is that your if block is outside of your http response block

...
}).then(function(response){$scope.data = response;});
  if($scope.data.data.encryptedkey != null ){  //<--- problem!
     encrypt = $scope.data.data.encryptedkey;
...

change this to the following and you'll be a step close to success~~

...
}).then(function(response){
  $scope.data = response;});
  if($scope.data.data.encryptedkey != null ){
     encrypt = $scope.data.data.encryptedkey;
     $scope.loginstatus = false;
     console.log($scope.loginstatus);
     alert(encrypt);
  }
});
...

Collectives™ on Stack Overflow

Execution is not going inside a function in a angularjs controller

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related