Ionic.bundle.js causes ng-click event to fire multiple times

ionic-v1
1

For anyone looking for a fix, this issue has been posted: https://github.com/driftyco/ionic/issues/4345

In my ionic app, all of my ng-click events are firing twice. I have simplified the code to the following: play.ionic.io/app/2fc7300bf4a6

NOTE: Clicking the button fires the alert once, the moment you click/touch off of the button anywhere else on the screen the alert fires again.

The error is not produced in the browser or on android, only on the ios emulator and an actual ios device.

I also tried creating a new blank ionic app and only changing the index.html and app.js. The error still occurs.

Partial fix: removing ionic.bundle.js and replacing with ionic-angular.js partially fixes the click event. The event does not fire twice but there is a 300ms delay on button clicks now and repeatedly clicking near the button will cause the event to fire.

UPDATE: As far as I can tell this is directly tied to using alert() or $window.alert() with a button or link. Removing the alert and using console.log alone, results in no additional click. Including the alert fires the entire event again, not just alert alone.

By replacing the alert with a cordovaDialog, the issue does not occur.

JS

(function() {

var app = angular.module('nh-launch', ['ionic']);

app.controller('testCtrl', function($scope) {
    $scope.testClick = function () {
         alert("hello");
    };
});

}());

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>NoHarm Safety Application</title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="lib/ngCordova/dist/ng-cordova.js"></script>
    <script src="lib/angular-resource/angular-resource.js"></script>
    <script src="lib/angular-random-string/src/angular-random-string.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>

  </head>
  <body ng-app="nh-launch">

   <ion-pane>
    <ion-content>

        <div ng-controller="testCtrl">
            <button ng-click="testClick()" class="button button-block button-calm">Test Click</button>
        </div>

    </ion-content>  
    </ion-pane>

  </body>
</html>

Stack trace result (fires once on initial click, fires again once the user touches the screen again):

console.trace()
     $scope.testClick @ app.js:13fn @ VM44:4
     (anonymous function) @ ionic.bundle.js:57514
     Scope.$eval @ ionic.bundle.js:24673
     Scope.$apply @ ionic.bundle.js:24772
     (anonymous function) @ ionic.bundle.js:57513
     eventHandler @ ionic.bundle.js:12098
     triggerMouseEvent @ ionic.bundle.js:2865
     tapClick @ ionic.bundle.js:2854
     tapMouseUp @ ionic.bundle.js:2927
1 Like
2

Could you share your routing file app.js. You might have assigned a controller for this route and again you might be using the ng-controller=<controller name> in the html too. So please double check if you are doing something like that.

1 Like
3

Where can I find the routing file? I am unfamiliar with this.

I have not changed anything in the angular-ui-router directory if this is what you’re referring to.

4

If you created your app off of an Ionic starter, the app.js file should have a config function with states defined, similar to this:

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider

  .state('tab', {
    url: "/tab",
    abstract: true,
    controller: 'AppCtrl',
    templateUrl: "templates/tabs.html"
  })

  // more states here

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/tab/topics');
});

This is the routing he is speaking of. I don’t see this being the issue though. I would be interested in seeing the contents of testCtrl. Do you think you could throw your code into a codepen or plunker? Something where I can reproduce the issue. :slight_smile:

5

Here’s a link to the code play.ionic.io/app/2fc7300bf4a6

The error is not produced in the browser or on android, only on the ios emulator and an actual ios device.

I also tried creating a new blank ionic app and only changing the index.html and app.js. The error still occurs.

6

I created an app based on your playground code, the only thing I changed was the Ionic version to 1.1.0, ran it in an iOS emulator, and I’m not able to see the issue. I downgraded to version 1.0.0 and still am unable to see the issue. Have you tried removing the other scripts to see if those are causing an issue?

7

In the stack trace it points to something happening in ionic.bundle.js.

I have tried removing the additional scripts, this does not fix the problem. I had just left those in there in this example because my full app uses those dependencies.

I have tested on ionic v1.1.0 and 1.0.0 and am still getting the same problem.

Partial fix: removing ionic.bundle.js and replacing with ionic-angular.js partially fixes the click event. The event does not fire twice but there is a 300ms delay on button clicks now and repeatedly clicking near the button will cause the event to fire.

8

Clicking the button itself, the alert comes up once. But the moment you click/touch anywhere else on the screen the alert will pop up again.

9

Hey, I was able to reproduce the issue with the new steps. Would you mind creating a new issue here: http://ionicframework.com/submit-issue/

Thank you!

10

Just submitted, thanks for your effort!

1 Like