jqueryMobile not compatible with angularJs.

[savagepanda]

environment:
jquery-mobile with angularJs + phoneGap

found 2 issues so far:

issue1: AngularJs uses hashtags to specify its routes. i.e. localhost\directory\index.html#\route1\etc jqueryMobile does not handle the hashtags from angularJs, and would wipe out the directoryPath on redirect, replacing it with localhost\route1.

issue2: angularJs appends a ng-scope css class for its controls (divs). This interferes with jqueryMobile's logic in adding header/footers.

[gabrielschulhof]

@savagepanda can you please elaborate on issue 2? "ng-scope css class"? How exactly does it interfere?

[jaspermdegroot]

@savagepanda

Re: issue 1. You probably have to disable jQuery Mobile's Ajax navigation and/or history manipulation to make both frameworks work together.

See ajaxEnabled and pushStateEnabled here http://jquerymobile.com/test/docs/api/globalconfig.html

[johnbender]

@savagepanda

For issue 1

$(document).bind("mobileinit", function () {
    $.mobile.ajaxEnabled = false;
    $.mobile.linkBindingEnabled = false;
    $.mobile.hashListeningEnabled = false;
    $.mobile.pushStateEnabled = false;
});

This will work if you want to use Angular's router and and then manually load pages. For more see: http://coenraets.org/blog/2012/03/using-backbone-js-with-jquery-mobile/

[gabrielschulhof]

@savagepanda make sure you add the above snippet @johnbender posted before the script tag which loads jQuery Mobile, or else those settings won't take effect.

[savagepanda]

Thank you, issue #1 is resolved by disabling the ajax/hash listening behavior.
(Edit, sorry spoke too soon, refresh is still broken, I had to disable hashListening explicitly to make it work.. I just pass the raw hash if using angularJS in the $.mobile._handleHashChange function line 4344 jqm 1.2.0)

for #2, i think this document describes the situation in a bit more detail.. https://github.com/tigbro/jquery-mobile-angular-adapter/blob/master/README.md

Any possibility of integrating those changes directly into JQM?

[jaspermdegroot]

@savagepanda

Re: "I had to disable hashListening explicitly to make it work" - See @johnbender his comment. $.mobile.hashListeningEnabled = false; disables hashListening. Do you mean you had to do something else as well to make it work?

About the second issue. I had a look at that readme, but it's still not clear to me. JQM's logic to add a header/footer is looking for a div with data-role="[header|footer]". So I don't understand how a CSS class can interfere with this.

Re: "Any possibility of integrating those changes directly into JQM?" - The solution for the first issue is setting the default for certain options to false. The fact that those features are optional and you can configure the default is the solution, so basically this is already integrated.

[jaspermdegroot]

@savagepanda

Can you please clarify the second issue? Thanks!

[jaspermdegroot]

@savagepanda

We can't look into the second issue you mentioned without an explanation. Closing this ticket as resolved.