AngularJs 控制器不工作

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

不需要“var loginCredController=”

使用简单:-

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

Answer 2

来自 angularjs 文档 form

You can use one of the following two ways to specify what JavaScript method should be called when a form is submitted:

ngSubmit directive on the form element

ngClick directive on the first button or input field of type submit (input[type=submit]) To prevent double execution of the handler, use only one of the ngSubmit or ngClick directives.

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

If a form has only one input field then hitting enter in this field triggers form submit (ngSubmit)

if a form has 2+ input fields and no buttons or input[type=submit] then hitting enter doesn't trigger submit

if a form has one or more input fields and one or more buttons or input[type=submit] then hitting enter in any of the input fields will trigger the click handler on the first button or input[type=submit] (ngClick) and a submit handler on the enclosing form (ngSubmit)

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

使用 ng-submit 或 input[type=submit]。

Answer 3

您的 html 标记有误。尝试正确关闭 tr 和 td 标签，并将 form 标签移出 table 标签，使 table 位于 form 内部，而不是相反。

AngularJs 控制器不工作

AngularJs Controller is not working

controller

controllers

angularjs