I am experiencing an issue with my Ionic app that wraps a web-app using Angular. Within the app, there are buttons coded like this:
<ion-view view-title="Orders">
<ion-content scroll="true" overflow-scroll="true">
<div class="row">
<!-- some other divs with text only -->
</div>
<div class="row">
<div class="col-xs-12">
<button type="button" ng-click="vm.go('orders.new')"
class="button btn btn-lg btn-info">new order</button>
</div>
</div>
</ion-content>
</ion-view>
My problem is that sometimes the vm.go() method does not execute when I tap or touch the button. This issue occurs with iOS devices running Ionic and Cordova, but works fine on Chrome and Android devices. Even when using Safari browser on iOS, it functions correctly.
This leads me to believe that the issue lies within Ionic and/or Cordova rather than the code itself.
If I manually attach an event handler (using plain JavaScript and getElementById()) to the button to capture touch or mouse events, they trigger as expected, but ng-click does not. In cases where the button's method fails to fire properly, the view ends up scrolling to the top instead.
It appears to be a kind of race condition, causing inconsistent behavior where ng-click is sometimes invoked and sometimes not.
I am currently using Ionic 1.3.2 and cordova 6.0.0 versions. Does anyone have insight on how to resolve this issue?