<md-button> ng-click fires inconsistently with Ionic Framework/ng-Material latest versions

http://codepen.io/anon/pen/MYOeap

The plunker above works fine, I found this on the Ionic Framework forums and it's functional and the click is fired as expected.

However the same code with the latest ionic css/js files along with latest Angular Material via bower install, the click doesn't work as intended. Any reason? I've also installed the #master but the clicks on md-button still don't work very well. It may fire once every 10-20 clicks, and sometimes it fires once every 5 clicks. This is a hangup for me right now on moving forward with a project.

Note: ng-click is broken on touch devices and Chrome emulation of such. Chrome desktop is unaffected. The Codepen above: works fine using 0.6.1 or 0.7.0 -- broken on 0.7.1.
I suspect it might be because of the hammer.js change on 0.7.1 - Ionic has a similar built-in version of hammer as well...

I'm having issues with this as well.

Can you verify whether this issue still exists in 0.8.0-rc1? Hammer.js was removed in 0.7.1 in favor of $mdGestures, so it's very likely because of that.

@marcysutton

@marcysutton Yes it still exists.

@marcysutton

this is an issue for me as well @marcysutton

http://forum.ionicframework.com/t/is-there-a-tutorial-for-using-ionic-and-angular-material/14662/14

I am at a loss with this bug as well. Is there a version that has the autocomplete before hammer was removed?

No, autocomplete wasnt implemented until after hammer was removed.
On Feb 24, 2015 7:41 PM, "iaaguilera" notifications@github.com wrote:

I am at a loss with this bug as well. Is there a version that has the
autocomplete before hammer was removed?

—
Reply to this email directly or view it on GitHub
#1406 (comment).

Is there an ETA for a fix or do I just rip it revert to an older version for the near future?

@jeffthompson1971

@jeffthompson1971 - @ThomasBurleson added it to the 0.9.0 milestone over a week ago, so just keep checking for updates.

Anyone? is this going to be fixed? I need to know what the plan is? do i need to drop angular-material and move to something where clicks work on mobile devices?

I tried using this and my Ionic Cordova App fails because Angular is throwing me an error:

Uncaught ReferenceError: jQuery is not defined

I had to do some code changes to make it work without an error.

Before:

    var self = {
      handler: addHandler,
      register: register,
      // On mobile w/out jQuery, we normally intercept clicks. Should we skip that?
      isHijackingClicks: (isIos || isAndroid) && !JQuery && !forceSkipClickHijack
    };

After:

var hasJQuery =  typeof jQuery !== 'undefined' && angular.element === jQuery;

    var self = {
      handler: addHandler,
      register: register,
      // On mobile w/out jQuery, we normally intercept clicks. Should we skip that?
      isHijackingClicks: (isIos || isAndroid) && !hasJQuery && !forceSkipClickHijack
    };

@sebmaniac

@sebmaniac - great catch. This should be improved with the commit SHA a22f681

@ThomasBurleson

thank you @ThomasBurleson,

$mdGestureProvider.skipClickHijack(); trick works perfectly for me

@ThomasBurleson

@ThomasBurleson FYI, this is happening again to Material v1.0.0 onwards.
However, the solution
$mdGestureProvider.skipClickHijack();

works nicely.

@ThomasBurleson

@ThomasBurleson thanks for your solution. it Works perfectly. Great

@ThomasBurleson

" $mdGestureProvider.skipClickHijack(); " Where to write it? @ThomasBurleson ,

@ilkayhan

@ilkayhan first import angular-material to get $mdGestureProvider, then do it in app.config.

Could there be a similar issue with the blur event firing when it is not necessary ? (Using along ionic-v1)

@ilkayhan

@ilkayhan - try

myAppModule.config(function($mdGestureProvider) {
    $mdGestureProvider.skipClickHijack();
});

@jonathan68

@jonathan68 you are using AngularJS Material with Ionic 2 or Angular Material with Ionic 2? For Angular Material, you can ask questions in their forums.

@ThomasBurleson

@ThomasBurleson can you say more about where

myAppModule.config(function($mdGestureProvider) { $mdGestureProvider.skipClickHijack(); });

goes? I tried it in my main.js file but that didn't seem to work, do I need to import angular-material like @thomcom said?

@sas1018

@sas1018 what exactly happened when you say "didn't seem to work"? The relevant docs can be found here: https://material.angularjs.org/latest/api/service/$mdGestureProvider

Navigation Menu

Repository navigation

<md-button> ng-click fires inconsistently with Ionic Framework/ng-Material latest versions #1406

21 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

<md-button> ng-click fires inconsistently with Ionic Framework/ng-Material latest versions #1406

Description

Activity

mikkokam commented on Feb 6, 2015

drastick commented on Feb 20, 2015

marcysutton commented on Feb 20, 2015

bradmartin commented on Feb 20, 2015

stellasoft-will commented on Feb 21, 2015

mikkokam commented on Feb 21, 2015

isaiahaguilera commented on Feb 25, 2015

bradmartin commented on Feb 25, 2015

jeffthompson1971 commented on Feb 26, 2015

bradmartin commented on Feb 26, 2015

jeffthompson1971 commented on Feb 28, 2015

21 remaining items

sebmaniac commented on May 12, 2015

ThomasBurleson commented on May 12, 2015

ashishtilara commented on Jun 13, 2015

yxh10 commented on Feb 24, 2016

ikhsanputra07 commented on Apr 14, 2016

ilkayhan commented on Apr 26, 2017

thomcom commented on Jun 7, 2017

daweedm commented on Jun 14, 2017

ThomasBurleson commented on Jun 14, 2017

Splaktar commented on Jan 17, 2018

sas1018 commented on Jun 11, 2018

Splaktar commented on Jun 11, 2018

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions