[Solved] ngClick firing twice

ionic-v1
1

Hi all,

I’m having issues regarding ng-click firing twice on my buttons. I’ve been using the sidemenu app and started using sidemenu’s left and right at the same time. I’ve been changing a lot, but only recently noticed that my ng-click is actually firing twice! I’m very sure, since I’ve put up an alert in it.

There are a few topics on this forum already which describe problems that look really much the same, and I’m not sure whether it actually is.

Similair topics:


And

Also, it seems to be the same as issue #1022, which can be found here:
https://github.com/driftyco/ionic/issues/1022 although the issue is closed already.

I’m very curious about the problem. I have checked, and don’t see angularJs included multiple times, neither does App.run fire twice. I just started using the default application though, which is why I do not understand the problem. Can’t seem to find a solution either.

<button class="button button-stable button-full padding-top" data-ng-click="setAuthenticated(true);">OK
        </button>

And in my controller:

  $scope.setAuthenticated = function ( setting ) {
    alert('test');
  }

It is not related to any html markup (it’s actually failing the same way in either complex and simple html structures), nor is it related to a specific view.

However, I must notify about the absence of this problem when using a default checked out sidemenu starter app. I will be trying to reproduce this error tomorrow in a codepen snippet, but hoping for a fix by posting at this point.

(For now, the snippet which could be found in one of the related topics i mentioned before, exactly demonstrates what I am experiencing: http://codepen.io/anon/pen/Ffdtj/)

Specs:

Using Ionic, v1.0.0-beta.11
Browser reproducing the problem:

  • Mozilla firefox 31.0
  • Google Chrome 36.0.1985.143 m
  • Google Canary 39.0.2136.0 canary (64-bit)
  • Opera 23.0.1522.77 Stable
    Tested on windows 8.1 64-bit (WoW64)
    Native reproducing the problem:
  • Android stock browser
  • Android mobile chrome
  • Android hybrid cordova app
    Tested on Samsung Galaxy S4 with android 4.4.2

Funny side note: Seems to be working fine in internet explorer 11.0.9600.17239

2

I am also experiencing this issue. I’m using the side menu example.

4

@allumbra Glad I’m not alone! Could you add some specific on your system specs and browsers etc? Do you notice the same behaviour in the codepen i placed?

@mhartington Any ideas on this?

5

It could be because you are using require.js.

Currently Ionic doesn’t support require.js. It is the opinion of the core Angular team, and ours as well, that a dependency management system like require.js have too much overlap with the core dependency injection scheme of Angular

Getting them to play well together doesn’t offer enough benefit. It can certainly be done, but you must bootstrap angular manually, breaking most angular examples out there.

6

Hmm, I missed that in the codepen… Read over it I guess. In my own code, I do not use requireJs. Any other thoughts without seeing code? Will create codepen that simulates my situation better.

7

I just tried to create a codepen, and literally uploaded all of my code, and included the ionic bundle from the ionic CDN. Found zero issues in the codepen… Decided it had to do something with my ionic bundle, and started looking over there.

Apparently, I still had my custom modified ionic bundle included, was pretty sure I reverted all the changes, but apparently not. Had tried to make ionic bundle work for ie8 (including different event bindings etc). Took the following steps in changing the ionic.bundle:

Include cross browser addEventHandler:

/**
 * Cross-browser compatible addEvent method
 *
 * @param {Object} obj
 * @param {string} type
 * @param {function} fn
 */
function addEvent( obj, type, fn ) {
  if ( obj.addEventListener ) {
    obj.addEventListener( type, fn, false );
  } else if ( obj.attachEvent ) {
    obj['e' + type + fn] = fn;
    obj[type + fn] = function () {obj['e' + type + fn]( window.event );};
    obj.attachEvent( 'on' + type, obj[type + fn] );
  } else {
    console.log( 'no suitable way found to attack an event' );
  }
}

/**
 * Cross-browser compatible removeEvent method
 *
 * @param {Object} obj
 * @param {string} type
 * @param {function} fn
 */
function removeEvent( obj, type, fn ) {
  if ( obj.removeEventListener ) {
    obj.removeEventListener( type, fn, false );
  }
  if ( obj.detachEvent ) {
    obj.detachEvent( 'on' + type, obj[type + fn] );
    obj[type + fn] = null;
  } else {
    console.log( 'No suitable way found to detach an event' );
  }
}

Then I executed find and replace on regex mode on the ionic.bundle.js: (executed in IntelliJ)

Search: ([\w\.]*)\.addEventListener\((.*), (.*)\);\B
Replace: addEvent\($1, $2, $3\);

Apparently, this binds to multiple ng-clicks… Not sure how, but it does seem that way.

NOTE: I didn’t receive IE8 compatibility by just doing this, no need to try, though it might be a start. Many many many issues followed and I decided to drop support for IE < 9 instead.

Conclusion: I failed, missed the still existing custom changes to ionic bundle. Issues resolved with fine support for IE9 and higher (just found some css issues so far, but you can change that customly ofcourse). No problems on the side of ionic, this issue was all my fault :frowning:

Topic could be closed :slight_smile:

8

Glad to hear you resolved the issue :smile:

1 Like
9

I’m still experiencing this issue on rc.2. It is happening for clicks in the header bar and buttons.

using lodash debounce to protect from its effects in the meantime

10

My conclusion was that it was my own fault for customizing the ionic bundle. Any customizing done on your side? If not, could you provide a codepen demonstrating the issue?

And since this issue was closed, you could probably better open a new topic and refer to this topic for simularity.