I am developing an app using the Ionic framework which also uses AngularJS. I have a problem where an ng-click event is being triggered, but then the same event is triggered on the next button press of a different button. For example on a page, I have multiple buttons, each with different ng-click handlers. However when I click a button, that buttons event handler is called, when I then click a different button, the first button's event handler is called again. I have to click that second button a second time to have its event handler called.
Here is my view code:
<ion-header-bar align-title="center" class="bar-positive">
<div class="buttons">
<button class="button button-clear" ng-click="goBack()">Back</button>
</div>
<h1 class="title"><img class="title-image" src="img/bkg_header2x.png" width="242" height="32" /></h1>
</ion-header-bar>
<ion-content class="">
<div class="maker_detail_title">
{{maker.project_name}}
</div>
<div class="maker_detail_maker">
<span style="font-weight: bold;">Maker:</span> {{maker.maker_name}}
</div>
<div class="maker_description">
{{maker.project_description}}
</div>
<div class="maker_detail_social">
<button type="button" class="button button-clear" ng-click="shareTwitter($event)">Twitter</button>
</div>
</ion-content>
and the corresponding controller code:
.controller('MakerDetailCtrl', function($scope, $state, $stateParams, $ionicHistory, makerService, $cordovaSocialSharing) {
$scope.maker = makerService.getMakerById($stateParams.makerId);
$scope.goBack = function() {
$ionicHistory.goBack();
}
$scope.shareTwitter = function($event) {
alert('share twitter');
$event.stopPropagation();
}
})
In this example, when I click the twitter button, I see the 'share twitter' alert, if I then click the 'back' button I again get the 'share twitter' alert. The second time a click back it calls the back action.
Note that I tried adding the stopPropagation call but that did not help. Any ideas?