Using jQuery causing ion-tabs to break

1

I’m using Ionic with ion-tabs/ui-route, and also using jQuery (for a jQuery plugin).

But, I think there is an incompatibility when using Ionic tab-bar with ui-router, and jQuery.

The jQuery plugin is implemented through a directive using

link: function(scope, element, attrs) {
   element.myjQplugin({
      // pass plugin options in an object
   })
}

I am also using ui-state, and ion-tabs for navigation.

If I are order the files on the .html page this way:
jquery.js
plugin.js
ionic.bundle.js

It breaks ion-tab, so it no longer works - no navigation - and this error:

Controller 'ionTabs', required by directive 'ngClass', can't be found!

I get same error if I remove the plugin altogether - so seems like a compatibility issue with jQuery.

If I order the files this way:
ionic.bundle.js
jquery.js
plugin.js

The navigation works as expected but the plugin doesn’t work and I get an error:

Object [object Object] has no method 'myjQplugin'

Is is possible to use Ionic with ui-router and ion-tabs with jQuery?

2

What version of Jquery are you using? What version of Ionic are you using? I know there are some issue with the latest version of jquery. I had them and had to downgrade to jquery 1.9.1

1 Like
3

You, my friend, are a life saver.

I downgraded from 2.1 to 1.11.0 and problem fixed.

Ideally I’d convert the plugin into a directive, but that for another day.

Thanks!

1 Like