jQuery Mobile和Angular.js -> 可折叠元素似乎无法正常工作

Question

我的团队正在尝试使用jquery mobile和angular.js来构建一款移动应用程序。这似乎有点棘手。我们试图通过angular js的ng-repeat指令来构建一个动态手风琴菜单，但是与jquery mobile的兼容性有些问题。请帮助我们解决这个问题。

    <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>

因为jQuery Mobile使用哈希标签和URL来实现手风琴的功能，而Angular解释了URL的变化，导致页面重新加载，这意味着可折叠区域永远无法打开。我们尝试禁用了几个jQuery Mobile的功能：

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

这个方法似乎不能用于手风琴。它确实解决了我们之前的路由问题。我们看到有一个适配器可以让jqm和angular一起使用，但我们宁愿避免依赖第三方软件。如果您对不使用适配器将angular js和jqm结合在一起是否可行有任何意见，也请告诉我们。此外，如果我们必须选择在移动站点上只使用其中一个，您会推荐哪一个？为什么？

感谢您的帮助！

- Marisa Martins

---

这是一个jsFiddle示例，用于说明问题。http://jsfiddle.net/XJcLY/14/ - EnGassa

我曾经遇到过类似的问题。我改变了jQuery和AngularJS库的顺序，像这样：首先是jQuery，其次是jqmobile，第三是AngularJS。 - Mahdi Rostami

Answer 1

将可折叠的ng-repeat项包装在div容器中。

<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>

在页面加载并且Angular应用ng-repeat后，尝试给出$("#mylist").trigger("create");。

- nijin

Answer 2

你不需要使用jQuery来制作手风琴效果。只需使用ng-click和ng-class来切换打开/关闭的CSS类即可。所有移动浏览器都支持CSS3动画，因此请使用它而不是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 代码：

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;
}

- Chris Gunawardena

---

这是建议另一种实现所需结果的方法，而不是回答帖子作者的问题。 - Bryan Green