在表单模态内单击 ng-click 不会触发事件
ng-click inside a form modal doesn't fire event
我刚刚写了那个打开模式的简单按钮。在这个模态中,我放置了一个 "Close" 按钮,它触发了一个运行良好的 "closeLogin()" 函数。与我在登录表单中创建一个啤酒按钮以启动 "doTestme()" 函数的方式相同,但它从未启动过。请看下面:
正确触发模态的按钮:
<script id="templates/home.html" type="text/ng-template">
<ion-view view-title="Welcome">
<ion-content class="padding">
<button type="button" class="button" ng-click="login()">Log-in Test, click on the beer!</button>
</ion-content>
</ion-view>
</script>
为此处理 $scope 的 "MainCtrl":
.controller('MainCtrl', function($scope, $ionicSideMenuDelegate, $ionicModal, $timeout) {
$scope.loginData = {};
// Create the login modal that we will use later
$ionicModal.fromTemplateUrl('templates/login.html', {
scope: $scope
}).then(function(modal) {
$scope.modal = modal;
});
// Triggered in the login modal to close it
$scope.closeLogin = function() {
$scope.modal.hide();
};
// Open the login modal
$scope.login = function() {
$scope.modal.show();
};
$scope.doTestme = function() {
alert("test ok");
};
正确弹出的模态:
<script id="templates/login.html" type="text/ng-template">
<ion-modal-view>
<ion-header-bar>
<h1 class="title">Login</h1>
<div class="buttons">
<button class="button button-clear" ng-click="closeLogin()">Close</button>
</div>
</ion-header-bar>
<ion-content>
<form ng-submit="doLogin()">
<div class="list">
<label class="item item-input">
<span class="input-label">Username</span>
<input type="text" ng-model="loginData.username">
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="password" ng-model="loginData.password" style="-webkit-flex: 1 0 100px;"><button type="button" ng-click="doTestme()" class="button button-icon ion-beer" style="font-size:35px;"></button>
</label>
<label class="item">
<button class="button button-block button-positive" type="submit">Log in</button>
</label>
</div>
</form>
</ion-content>
</ion-modal-view>
</script>
就好像 ng-click 从未被观看过一样,我在控制台中没有任何错误,无法调试它所以...有想法吗?
一开始我尝试了两件事:
- Change the function to "doAlert()"
- Change the button to a normal link " test"
成功了!但是几分钟后 link 不再触发警告框。
我刚刚在 CodePlen 中尝试过。请在外面做,然后发回反馈。
你不应该使用里面的按钮label.It将无法正常工作。
只需将容器从 <label>
更改为 <div>
<div class="item item-input">
<span class="input-label">Password</span>
<input type="password" ng-model="loginData.password" style="-webkit-flex: 1 0 100px;">
<button type="button" ng-click="doTestme()" class="button button-icon ion-beer" style="font-size:35px;"></button>
</div>
检查这个工作codepen
我刚刚写了那个打开模式的简单按钮。在这个模态中,我放置了一个 "Close" 按钮,它触发了一个运行良好的 "closeLogin()" 函数。与我在登录表单中创建一个啤酒按钮以启动 "doTestme()" 函数的方式相同,但它从未启动过。请看下面:
正确触发模态的按钮:
<script id="templates/home.html" type="text/ng-template">
<ion-view view-title="Welcome">
<ion-content class="padding">
<button type="button" class="button" ng-click="login()">Log-in Test, click on the beer!</button>
</ion-content>
</ion-view>
</script>
为此处理 $scope 的 "MainCtrl":
.controller('MainCtrl', function($scope, $ionicSideMenuDelegate, $ionicModal, $timeout) {
$scope.loginData = {};
// Create the login modal that we will use later
$ionicModal.fromTemplateUrl('templates/login.html', {
scope: $scope
}).then(function(modal) {
$scope.modal = modal;
});
// Triggered in the login modal to close it
$scope.closeLogin = function() {
$scope.modal.hide();
};
// Open the login modal
$scope.login = function() {
$scope.modal.show();
};
$scope.doTestme = function() {
alert("test ok");
};
正确弹出的模态:
<script id="templates/login.html" type="text/ng-template">
<ion-modal-view>
<ion-header-bar>
<h1 class="title">Login</h1>
<div class="buttons">
<button class="button button-clear" ng-click="closeLogin()">Close</button>
</div>
</ion-header-bar>
<ion-content>
<form ng-submit="doLogin()">
<div class="list">
<label class="item item-input">
<span class="input-label">Username</span>
<input type="text" ng-model="loginData.username">
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="password" ng-model="loginData.password" style="-webkit-flex: 1 0 100px;"><button type="button" ng-click="doTestme()" class="button button-icon ion-beer" style="font-size:35px;"></button>
</label>
<label class="item">
<button class="button button-block button-positive" type="submit">Log in</button>
</label>
</div>
</form>
</ion-content>
</ion-modal-view>
</script>
就好像 ng-click 从未被观看过一样,我在控制台中没有任何错误,无法调试它所以...有想法吗?
一开始我尝试了两件事:
- Change the function to "doAlert()"
- Change the button to a normal link " test"
成功了!但是几分钟后 link 不再触发警告框。
我刚刚在 CodePlen 中尝试过。请在外面做,然后发回反馈。
你不应该使用里面的按钮label.It将无法正常工作。
只需将容器从 <label>
更改为 <div>
<div class="item item-input">
<span class="input-label">Password</span>
<input type="password" ng-model="loginData.password" style="-webkit-flex: 1 0 100px;">
<button type="button" ng-click="doTestme()" class="button button-icon ion-beer" style="font-size:35px;"></button>
</div>
检查这个工作codepen