After creating a simple button to open a modal, I encountered an issue with another button inside the modal. The "Close" button works fine and triggers the "closeLogin()" function, but the button within the login form that is supposed to launch a "doTestme()" function never seems to be triggered. Here is the code snippet for reference:
The button that correctly opens 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 controller "MainCtrl" managing the $scope:
.controller('MainCtrl', function($scope, $ionicSideMenuDelegate, $ionicModal, $timeout) {
$scope.loginData = {};
// Create the login modal
$ionicModal.fromTemplateUrl('templates/login.html', {
scope: $scope
}).then(function(modal) {
$scope.modal = modal;
});
// Close the login modal
$scope.closeLogin = function() {
$scope.modal.hide();
};
// Open the login modal
$scope.login = function() {
$scope.modal.show();
};
$scope.doTestme = function() {
alert("test ok");
};
The modal that successfully pops 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 appears that the ng-click event is not being watched or triggered. There are no errors in the console, making it difficult to debug. Any insights on how to resolve this issue?
You can view the CodePen here: http://codepen.io/anon/pen/jEpNGB