web-dev-qa-db-ja.com

ボタンクリックでng-clickイベントが発生しませんか？

angularjsでWebアプリケーションを作成しています。データベースからログインするためのコードを別の.jsファイルに書き込みます。ページの読み込み時に実行されますが、ボタンのクリック時にトリガーされません。私の.jsコードは次のとおりです。

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

私がAngularjsを使用してこれをバインドするために使用しているものとしての私の見解は、コードがページの読み込みで機能しているが、ボタンのクリックでは機能しないという問題です。使用するコードは次のとおりです：

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

誰もが私がここで見逃しているものを助けてください、それで私は事前にボタンクリックのおかげでng-clickイベントをトリガーすることができません。

angularjsangularjs-directiveangularjs-ng-click
7
Amit Sharma

Login関数はスコープ上にある必要があります。現在、基本的にはプライベート関数です。

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

関数をスコープ変数に割り当てます。

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

編集：

このhtmlコードを使用しようとしましたが、よくわかりません。ng-initとng-controllerの両方が同じdivにあり、ng-initの後に最初にng-controllerがロードされている可能性があります：

<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>
3
Mukund Kumar