ng-click event is not firing on button click?

Question

i'm creating web application in Angularjs i write code in separate .js file for log in from database is is execute on page load but not triggering on button click, my .js code is:

var adminModule = angular.module('angApp', []);
//Defining a Angular Controller
adminModule.controller('AdminCtrl', ['$scope', '$http',
    function ($scope, $http) {
        Login();
        function Login(U_Name, U_PWD) {
            debugger;
            //Defining the $http service for login the admin user
            $http({
                method: 'POST',
                url: '/Admin/IsAuthenticate',
                data: { User_Name: U_Name, User_PWD: U_PWD }
            }).success(function (result) {

                if (result == true) {
                    alert('user is valid');
                }
                else {
                    alert('unauthorised access!');
                }
            }).error(function (error) {
                //Showing error message 
                $scope.status = 'Unable to connect' + error.message;
            });
        }
    }]);

and my view as what i'm using for binding this using Angularjs here is an issue above code is working on page load but don't work on button click, the code i use is:

<div class="admin-login" ng-controller="AdminCtrl" ng-app="angApp">
    <h2>using angularjs</h2>
    <input type="text" id="txtUserAng" placeholder="User Name" ng-model="U_Name" />
    <input type="password" id="txtPWDAng" placeholder="Password" ng-model="U_PWD"  />
    <input type="button" id="login" value="login" ng-click="Login()" />
</div>

anyone please help me what i miss here so i'm not able to trigger ng-click event on button click thanks in advance.

Pogonia

it should be $scope.login = function() etc. – Watchdog

i used it, but it couldn't fix my issue: $scope.login = function Login(U_Name, U_PWD) { $http({ method: 'POST', url: '/Admin/IsAuthenticate', data: { User_Name: U_Name, User_PWD: U_PWD } }).success(function (result) { if (result == true) { alert('user is valid'); } else { alert('unauthorised access!'); } }) } – Pogonia

then show your updated code – Watchdog

in the main thread not in a comment – Watchdog

Answer 1

Your Login function needs to be on a scope. Right now, its essentially a private function:

$scope.Login = function () {
  ...
}

Collation

i'm writing same as above but it is not executing on click event it's working fine on load – Pogonia

It's working on load because the controller is calling Login() in its lexical scope when created. Can you create a Plunk or JsFiddle showing your issue? If you define the function on scope and then reference it in your HTML as you have it, it should work – Collation

It's working for me. Updated fiddle with a console.log to show the login function is getting called. There are other errors, but your original question was that the ng-click event wasn't firing. jsfiddle.net/smaye81/pefLcbua/2 – Collation

hi sma, i'm not able to get what your mean with fiddle using console.log – Pogonia

If you look at the link for my fiddle, when you click the button you'll see that 'login called' is logged in the browser console. – Collation

hi sma, now it's also working in my fiddle: jsfiddle.net/6nnjeqn6/4 but i couldn't get what thing i need to add in my project so it's help to fire ng-click event – Pogonia

Answer 2

assign function to a scope variable.

var adminModule = angular.module('angApp', []);
//Defining a Angular Controller
adminModule.controller('AdminCtrl', ['$scope', '$http',
    function ($scope, $http) {
        $scope.Login = function (U_Name, U_PWD) {
            debugger;
            //Defining the $http service for login the admin user
            $http({
                method: 'POST',
                url: '/Admin/IsAuthenticate',
                data: { User_Name: U_Name, User_PWD: U_PWD }
            }).success(function (result) {
                if (result == true) {
                    alert('user is valid');
                }
                else {
                    alert('unauthorised access!');
                }
            }).error(function (error) {
                //Showing error message 
                $scope.status = 'Unable to connect' + error.message;
            });
        }
        $scope.Login();
    }]);

Edited:

try to use this html code,but i am not sure.it may be that both ng-init and ng-controller are in same div and ng-controller load first after that ng-init :

<div ng-app="angApp">
  <div class="admin-login" ng-controller="AdminCtrl" >
     <h2>using angularjs</h2>
    <input type="text" id="txtUserAng" placeholder="User Name" ng-model="U_Name" />
    <input type="password" id="txtPWDAng" placeholder="Password" ng-model="U_PWD"  />
    <input type="button" id="login" value="login" ng-click="Login()" />
  </div>
</div>

Uria

i'm writing same as above but it is not executing on click event it's working fine on load – Pogonia

problem is only with ng-click event it's working fine on load but on click event it's not going to the .js controller – Pogonia