Databases
StackOverflow2013
Postsdbo
POAngularJS + jQuery Mobile w/ No Adapter & Disabled Routing - Used For UI Styling Only
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAngularJS + jQuery Mobile w/ No Adapter & Disabled Routing - Used For UI Styling Only
    text
    copied!<p>I am learning AngularJS and have built a small application. Now that it's functionally complete, I'd like to style it up using jQuery Mobile.</p> <p>Originally I dropped in <a href="https://github.com/tigbro/jquery-mobile-angular-adapter">tigbro's jquery-mobile-angular-adapter</a>, but ultimately decided it was more complicated and involved than I needed. I'm not after any fancy screen transitions or page management features in jQuery Mobile - I just want to use it for styling the application and let AngularJS handle the rest.</p> <p>I read <a href="http://coenraets.org/blog/2012/03/using-backbone-js-with-jquery-mobile/">this post</a>, which has the same goal in mind, albeit with another framework, and contains a code snippet to disable the jQuery Mobile routing.</p> <p>I've applied that snippet to my application in this order of script loading, just before the close body tag:</p> <ol> <li>jQuery</li> <li>snippet</li> <li>jQuery Mobile</li> <li>AngularJS</li> </ol> <p>This snippet placement is the only one that works, or somewhat works anyway, in that anything in my index loads styled properly (header and main nav, basically), and my AngularJS routes work just fine, but any dynamically loaded templates that populate my ng-view, despite having jQuery Mobile data-roles (ul as listview, etc.), are not styled by jQuery Mobile; they're just plain HTML.</p> <p>Does anyone have an idea as to how I could get those dynamically loaded templates to also be styled?</p> <p>My index HTML structure looks like this:</p> <pre><code>&lt;body&gt; &lt;div data-role="page"&gt; &lt;div data-role="header" data-position="fixed"&gt; &lt;h1&gt;MyApp&lt;/h1&gt; &lt;a href="#/home"&gt;Home&lt;/a&gt; &lt;a href="#/add_item"&gt;Add&lt;/a&gt; &lt;/div&gt; &lt;div data-role="content" ng-view&gt;&lt;/div&gt; &lt;/div&gt; &lt;!-- Scripts --&gt; &lt;/body&gt; </code></pre> <p>And here's an example of one of my templates:</p> <pre><code>&lt;ul data-role="listview" ng-controller="MyListCtrl"&gt; &lt;li ng:repeat="item in things"&gt; &lt;a href="#/item/{{ item.ID }}"&gt;{{ item.title }}&lt;br/&gt;{{ formatDateForDisplay(item.addDate) }}&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; </code></pre> <p>Thank you!</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload