Question

var loginModule = angular.module("loginModule", ['ngRoute']);


loginModule.config(['$routeProvider',
  function ($routeProvider) {
      $routeProvider.
        when('/LoginCredential', {
            templateUrl: 'login_credential.html',
            controller: ''
        }).
        when('/SecurityQuestionPage', {
            templateUrl: 'security_question.html',
            controller: ''
        }).
        otherwise({
            redirectTo: '/LoginCredential'
        });
  }]);


var loginCredController = loginModule.controller('loginCredController', ['$scope', '$http', function ($scope, $http) {
    debugger;
    $scope.loginData = {};
    $scope.submit = function (LoginForm, loginData)
    {
        debugger;
        var uname = loginData.username;
        var pwd = loginData.password;
        var lData = 'username='+uname+'&'+'password='+pwd

        var request = $http({
            method: "post",
            url: "http://localhost:53738/Login?response_type=code&client_id=peopleworks&redirect_uri=google.com",
            data: lData
        });

        request.success(
            function (response) {
                debugger;
                

            }
        );
    }
}]);

这是login.js文件。这些是我的观点login.html和login_credential.html

的login.html

<!DOCTYPE html>

<html>
    <head>
        <script src="Peopleworks/Scripts/angular.min.js"></script>
        <script src="Peopleworks/Scripts/angular-route.min.js"></script>
        <script src="Peopleworks/Lib/peopleworksLogin.js"></script>
    </head>
<body>
    <div data-ng-app="loginModule">
            <div ng-view=""></div>
            
    </div>
</body>
</html>

和的 login_credential.html

<div data-ng-controller ="loginCredController">
<table>
                <form method="post" name="LoginForm" ng-submit="submit(LoginForm, loginData)" novalidate>
                    <tr><td>Username</td><td><input id="username" name="username" ng-model="loginData.username"  type="text" /></td>
                    <tr><td>Password</td><td><input id="password" name="password" ng-model="loginData.password"  type="password" /></td>
                    <tr><td><button type="submit">Login</button>
                </form>
</table>
</div>

问题是当我点击提交控制器中的方法不起作用时......有人可以帮助我吗？

Answer 1

不需要＆＃34; var loginCredController=＆＃34;

简单使用： -

loginModule.controller('loginCredController', ['$scope', '$http', function ($scope, $http){
    ...
    ...
    }

Answer 2

来自angularjs docs form

您可以使用以下两种方法之一来指定在提交表单时应调用的JavaScript方法：

  表单元素上的
ngSubmit指令
ngClick指令在第一个按钮或输入字段类型提交（input[type=submit]）   要防止执行处理程序的双重执行，请仅使用ngSubmit或ngClick指令之一。

这是因为HTML规范中的以下表单提交规则：

如果表单只有一个输入字段，则点击此字段中的输入会触发表单提交（ngSubmit）

如果表单有2个以上的输入字段且没有按钮或input[type=submit]则点击输入不会触发提交

如果表单有一个或多个输入字段和一个或多个按钮或输入[type = submit]，则在任何输入字段中输入将触发第一个按钮上的点击处理程序或input[type=submit]（{ {1}}）和封闭表单（ngClick）
上的提交处理程序

请注意，ngSubmit事件将在模型更新之前发生。使用ngClick可以访问更新的模型。

使用ngSubmit或ng-submit。

Answer 3

您的HTML标记错误。请尝试正确关闭tr和td标记，并将表单标记从表标记中移出，使表格不在其他方式驻留在表单内。

AngularJs控制器无法正常工作

3 个答案: