jquery mobile and angular.js -> collapsible doesn't seem to work

Question

My team is trying to do a mobile application with both jquery mobile and angular.js. It seems that they can be a little tricky. We are trying to build a dynamic accordion with jquery mobile but with ng-repeat directive by angular js:

    <div data-role="collapsible" ng-repeat="catalog in catalog_list | filter: isDependent"> 

         <h6>
             {{ catalog.catalog_name }} <span ng-show="catalog.next"> <a  ng-click="changeCurrent(catalog.catalog_id)"> {{ catalog.next }}</a></span>

        </h6> 
            <p>some Content</p>


</div>
 </div>

Because jquery mobile works with hashtags and url to make the accordion work, angular is interpreting the url change and causing a page view reload, which means that the collapsible never gets to open. We have tried disabling several jquery mobile features:

    $.mobile.hashListeningEnabled = false;
    $.mobile.linkBindingEnabled = false;
$.mobile.ajaxEnabled = false;

This does not seem to work for the accordion. It did solve a problem with routing we had before. We have seen there is an adapter for using jqm and angular together but we would rather avoid having to depend on third-party software. Any opinion on wether using angular js and jqm together without an adapter is viable would also be appreciated. Also, if we had to choose to use only one of them for our mobile site, which one would you recommend and why?

Thank you for the help!

Answer 1

You don't need jquery to do an accordian. Just use ng-click and ng-class to toggle open-close css classes. All mobile browsers support css3 animations so use it instead of jquery.

<h1>my Library</h1>
<div class="library onloan"  ng-class="{onloan_open: !library.onloan_open }" ng-click="library.onloan_open = !library.onloan_open">On loan <strong>6 </strong></div>

<ul class="library">
    <li class="overdue-header">Overdue 4</li>
    <li class="overdue">aaaa <strong>12/12/2012</strong></li>

    <li class="due-soon-header">Due soon 4</li>
    <li class="due-soon">aaaa <strong>12/12/2012</strong></li>
    <li class="due-soon">aaaa <strong>12/12/2012</strong></li>

    <li class="not-due-yet-header">Not due yet 4</li>
    <li class="not-due-yet">aaaa <strong>12/12/2012</strong></li>
    <li class="not-due-yet">aaaa <strong>12/12/2012</strong></li>
</ul>


<div class="library reserved"  ng-class="{reserved_open: !library.reserved_open }" ng-click="library.reserved_open = !library.reserved_open">Reserved <strong>11 </strong></div>
<ul class="library">
    <li class="not-due-yet">aaaa <strong>12/12/2012</strong></li>
    <li class="not-due-yet">aaaa <strong>12/12/2012</strong></li>
</ul>

CSS CODE:

ul.library {
    max-height: 1000px;
    overflow-x: hidden;
    overflow-y: hidden;

    transition-delay: 0s;
    transition-duration: 0.5s;
    transition-property: all;
    transition-timing-function: ease-in-out;
}

.closed + ul.library {
    max-height: 0;
    padding-bottom: 0;
    padding-top: 0;
}

Answer 2

Wrapping your collapsible ng-repeat items inside a div container

<div id="mylist">
<div data-role="collapsible" ng-repeat="catalog in catalog_list | filter: isDependent"> 
    <h6>
       {{ catalog.catalog_name }} 
       <span ng-show="catalog.next"> 
           <a  ng-click="changeCurrent(catalog.catalog_id)"> {{ catalog.next }}</a>
       </span>
    </h6> 
    <p>some Content</p>
</div>
</div>

In your script after the page loads and angular applies ng-repeat, try giving $("#mylist").trigger("create");