Ionic With Angular Material

If anyone is attempting to use Ionic along with Angular Material and finding that things don’t work, there are a couple of solutions;

  1. Using the Bower install of Angular Material, edit angular-material.js line 1052 to change it from:

var shouldHijackClicks = isIos || isAndroid;

…to…

var shouldHijackClicks = false; //isIos || isAndroid;

  1. If you’re using the latest nightly version there’s a directive in mdGestureProvider that does effectively the same thing (it was only added a couple of weeks ago so it’s not in the stable version yet);
   app = angular.module('MyApp', ['ngMaterial'])
      .config(function( $mdGestureProvider ) {
          $mdGestureProvider.skipClickHijack();
      });

The reason is that Material does some dodgy hijacking of clicks which breaks pretty much everything on phones.

Had a fun day working that one out. :slight_smile:

2 Likes

Thanks for figuring this out…

I’m deciding on which library to use and wondered if you have good experience using angular-material and not ionic-material.

thanks.

I’ve not managed to get very far with Ionic Material. The documentation is broken. The demo looks promising but it’s not ready to use yet.