jquery mobile 和 angular.js -> collapsible 似乎不起作用

Question

我的团队正在尝试使用 jquery mobile 和 angular.js 制作一个移动应用程序。似乎它们可能有点棘手。 我们正在尝试使用 jquery mobile 构建动态手风琴，但使用 angular js 的 ng-repeat 指令：

    <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.hashListeningEnabled = false;
    $.mobile.linkBindingEnabled = false;
$.mobile.ajaxEnabled = false;

这似乎不适用于手风琴。它确实解决了我们之前遇到的路由问题。我们已经看到有一个适配器可以同时使用 jqm 和 angular，但我们宁愿避免依赖第三方软件。任何关于在没有适配器的情况下一起使用 angular js 和 jqm 是否可行的意见也将不胜感激。另外，如果我们必须选择仅将其中一种用于我们的移动网站，您会推荐哪一种？为什么？

感谢您的帮助！

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");

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