Question

有两个ng-controller，每个ng-click有一次ng-click。

如果我将脚本设置为两次ng-click作为以下代码，则这两个按钮将不起作用。但是，如果我只设置一个ng-click的脚本，按钮就可以工作。

我该如何解决？

<body ng-app="myapp">
    <div ng-controller="loginController">
        <h3>Login</h3>
        <form class="login" role="form">
            <div class="form-group">
                <label for="email">Email:</label>
                <input type="email" class="form-control" id="email" placeholder="Enter email" ng-model="email">
            </div>
            <div class="form-group">
                <label for="pwd">Password:</label>
                <input type="password" class="form-control" id="pwd" placeholder="Enter password" ng-model="password">
            </div>
            <button type="submit" ng-click="login()" class="btn btn-default">Login</button>
        </form>
    </div>

    <div ng-controller="registerController">
        <h3>Register</h3>
        <form class="register" role="form">
            <div class="form-group">
                <label for="email">Email:</label>
                <input type="email" class="form-control" id="email" placeholder="Enter email" ng-model="emailR">
            </div>
            <div class="form-group">
                <label for="pwd">Password:</label>
                <input type="password" class="form-control" id="pwd" placeholder="Enter password" ng-model="pwdR">
            </div>
            <div class="form-group">
                <label for="name">Your Name:</label>
                <input type="text" class="form-control" id="name" placeholder="Enter your name" ng-model="nameR">
            </div>
            <button type="submit" ng-click="register()" class="btn btn-default">Register</button>
        </form>
    </div>

    <script>
        var api = ""

        angular.module("myapp", []).controller("loginController", function($scope, $http) {
            $scope.login = function(){
                if(!isEmpty($scope.email) || !isEmpty($scope.password)){
                    var loginInfo = api + "login/" + $scope.email + "/" + $scope.password;
                    var responsePromise = $http.get(loginInfo);
                    responsePromise.success(function(data, status, headers, config) {
                        var msg = data.result;
                        alert(msg);
                        top.location.reload();
                    });
                    responsePromise.error(function(data, status, headers, config) {
                        alert("AJAX fail!");
                    }); 
                }
            }
        });

        angular.module("myapp", []).controller("registerController", function($scope, $http) {
            $scope.register = function(){
                if(!isEmpty($scope.emailR) || !isEmpty($scope.pwdR || !isEmpty($scope.nameR))){
                    var registerInfo = api + "register/" + $scope.emailR + "/" + $scope.pwdR + "/" + $scope.nameR;                      alert(registerInfo);
                    var responsePromise = $http.get(registerInfo);
                    responsePromise.success(function(data, status, headers, config) {
                        var msg = data.result;
                        alert(msg);
                    });
                    responsePromise.error(function(data, status, headers, config) {
                        alert("AJAX fail!");
                    }); 
                }
            }
        });

Answer 1

由于您使用具有不同<form>元素的按钮类型提交，您可以执行以下操作：

<div ng-controller="loginController">
    <form name="loginForm" data-ng-submit="login()">
         <button type="submit">Submit Form 1</button>
    </form>
</div>

<div ng-controller="registerController"> 
    <form name="registerForm" data-ng-submit="register()">
        <button type="submit">Submit Form 2</button>
    </form>
</div>

ng-submit会自动识别提交按钮，您可以在两个控制器中编写一个函数：

 <script>
    var api = ""

    angular.module("myapp", []).controller("loginController", function($scope, $http) {
        $scope.login = function(){
            if(!isEmpty($scope.email) || !isEmpty($scope.password)){
                var loginInfo = api + "login/" + $scope.email + "/" + $scope.password;
                var responsePromise = $http.get(loginInfo);
                responsePromise.success(function(data, status, headers, config) {
                    var msg = data.result;
                    alert(msg);
                    top.location.reload();
                });
                responsePromise.error(function(data, status, headers, config) {
                    alert("AJAX fail!");
                }); 
            }
        }
    });

    angular.module("myapp", []).controller("registerController", function($scope, $http) {
        $scope.register = function(){
            if(!isEmpty($scope.emailR) || !isEmpty($scope.pwdR || !isEmpty($scope.nameR))){
                var registerInfo = api + "register/" + $scope.emailR + "/" + $scope.pwdR + "/" + $scope.nameR;                      alert(registerInfo);
                var responsePromise = $http.get(registerInfo);
                responsePromise.success(function(data, status, headers, config) {
                    var msg = data.result;
                    alert(msg);
                });
                responsePromise.error(function(data, status, headers, config) {
                    alert("AJAX fail!");
                }); 
            }
        }
    });

无法在同一页面上点击2英镑

1 个答案: