Jeff86 Jeff86 - 3 months ago 11
AngularJS Question

ng-click inside a form modal doesn't fire event

I just wrote that simple button that open a modal. In this modal I put a "Close" button that fires a "closeLogin()" function that works well. The same way I create a beer button inside the login form to launch a "doTestme()" function but it is never launched. Please see below:

Button that correctly trigger the modal:

<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>


The "MainCtrl" that handle the $scope for this:

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


Modal that correctly pop-out:

<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>


It's as if the ng-click is never watched, I don't have any errors in console, no way to debug this so... Any idea?

Here is the codepen: http://codepen.io/anon/pen/jEpNGB

Answer

You should not use buttons inside label.It will not work properly. Just change the container from <label> to <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>

Check this working codepen

Comments