jquery-mobile - jquery mobile 和 angular.js -> 可折叠似乎不起作用

Question

我的团队正在尝试使用 jquery mobile 和 angular.js 开发一个移动应用程序。看起来他们可能有点棘手。我们正在尝试使用 jquery mobile 构建动态 Accordion ，但使用 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 来使 Accordion 工作，angular 正在解释 url 更改并导致页面 View 重新加载，这意味着可折叠永远不会打开。我们已经尝试禁用几个 jquery 移动功能:

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

这似乎不适用于 Accordion 。它确实解决了我们之前遇到的路由问题。我们已经看到有一个适配器可以同时使用 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");