Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>This problem is not related to AngularJs. It happend that jQuery Mobile is not aware of every DOM change, and you need to give it a tip. To adivice jQuery Mobile about the change, you need to trigger a <code>create</code> event on the element.</p> <p>According to the <a href="http://jquerymobile.com/demos/1.2.0/docs/pages/page-scripting.html" rel="nofollow">docs</a> (look at "Enhancing new markup"):</p> <blockquote> <p>However, if you generate new markup client-side or load in content via Ajax and inject it into a page, <strong>you can trigger the create event</strong> to handle the auto-initialization for all the plugins contained within the new markup. This can be triggered on any element (even the page div itself), saving you the task of manually initializing each plugin (listview button, select, etc.).</p> </blockquote> <p>So all you got to do is to trigger the <code>create</code> event just after the content has been included.</p> <p>I'd suggest you to create a directive that simply triggers the event on the templates for you. Something like:</p> <pre class="lang-js prettyprint-override"><code>app.directive('jqueryMobileTpl', function() { return { link: function(scope, elm, attr) { elm.trigger('create'); } }; }); </code></pre> <p>Then you just add this directive to the root element of the template:</p> <pre class="lang-html prettyprint-override"><code>&lt;div jquery-mobile-tpl&gt; &lt;ul data-role="listview" data-inset="true" data-theme="c"&gt; &lt;li&gt;&lt;a href="#/detailsuser/a"&gt;A&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#/detailsuser/b"&gt;B&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#/detailsuser/c"&gt;C&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#/detailsuser/d"&gt;D&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <p>You could make this directive low priority, so if you use other directives that might change the template, this one would wait for all changes before telling jQuery Mobile to render. Working sample <a href="http://plnkr.co/edit/dThXNX?p=preview" rel="nofollow">here</a>.</p>
    singulars
    1. This table or related slice is empty.
    1. POAngularJS and jquery mobile
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USCaio Cunha
    1. USCaio Cunha
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POAngularJS and jquery mobile
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COI tried your solution and it works! But if I try to load the list dynamically, the control does not get rendered. `<div jquery-mobile-tpl> <ul data-role="listview" data-inset="true" data-theme="c" data-ng-repeat="customer in customers | orderBy:'lastName'"> <li><a href="#/customerdetails/{{customer.id}}" rel="external">{{customer.firstName + ' ' + customer.lastName}}</a></li> </ul> </div>`
      singulars
      1. PO
      1. USDánjal Salberg Adlersson
    2. COWhich control? Angular controller?
      singulars
      1. PO
      1. USCaio Cunha
    3. COThe <ul data-role="listview" does not get rendered if I apply data-ng-repeat="customer in customers | orderBy:'lastName'"
      singulars
      1. PO
      1. USDánjal Salberg Adlersson
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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