不能在同一页上有2个ng单击

如果我将下面的代码设置为两个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!"); 
        }); 
       } 
      } 
     });

来源

2016-05-29 marcshj

您可能想用别名命名您的控制器，然后在调用ng-click（）方法时将此别名用作前缀。例如：ng-controller =“loginController as ctrl”，然后ng-click =“ctrl.login（）”当然可以将别名更改为任何适合的名称。通常以单数和小写形式表示控制器的名称。这样你甚至可以嵌套控制器。并在控制器上的方法的定义使用：this.login，而不是$ scope.login – Jorge

由于使用按钮式不同<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提交确认提交按钮，你可以在你的两个写一个函数控制器为：

<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!"); 
       }); 
      } 
     } 
    });

来源

2016-05-29 04:44:37

仍然无法正常工作。但是，谢谢。 – marcshj

看看我的编辑，这将肯定工作 –

ughhh..still不工作。我认为这不是ng-submit的问题。 – marcshj

不能在同一页上有2个ng单击

回答

相关问题