有两个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!");
});
}
}
});
答案 0 :(得分:0)
由于您使用具有不同<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!");
});
}
}
});