jquery mobile and angular.js - >可摺疊似乎不起作用

我的團隊正在嘗試使用jquery mobile和angular.js做一個移動應用程序。看起來他們可能有點棘手。我們正在努力建設一個充滿活力的手風琴與jQuery Mobile的，但通過角JS NG-重複指令：jquery mobile and 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>

因爲有井號標籤和URL jQuery Mobile的工程，使手風琴工作，棱角分明的解釋url更改並導致頁面視圖重新加載，這意味着collapsible永遠不會打開。我們已經嘗試禁用幾個jQuery的移動功能：

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

這似乎不適用於手風琴。它確實解決了我們之前的路由問題。我們已經看到有一個適配器可以同時使用jqm和angular，但我們寧願避免依賴第三方軟件。任何關於使用角度js和jqm在沒有適配器的情況下的任何意見都是可行的。另外，如果我們必須選擇僅將其中一個用於我們的移動網站，那麼您會推薦哪一個，爲什麼？

謝謝你的幫助！

來源

2013-07-25 Marisa Martins

這裏是一個jsFiddle來說明這個問題。 http://jsfiddle.net/XJcLY/14/ – EnGassa

我有類似的問題。我改變了jQuery和angularjs庫的順序是這樣的：第一個jQuery，第二個jqmobile第三個angularjs –

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

來源

2013-07-25 14:15:49

這是建議另一種方法來達到理想的結果，而不是回答海報的問題。 –

在頁面加載後結束語一個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>

內的可摺疊NG重複項目在腳本和角度適用NG-重複，嘗試給予$（「＃mylist」）。trigger（「create」）;

來源

2014-05-22 09:55:01 nijin

jquery mobile and angular.js - >可摺疊似乎不起作用

回答

相關問題