jquery mobile 및 angular.js -> collapsible이 작동하지 않는 것 같습니다.

Question

저희 팀은 jquery mobile과 angular.js를 모두 사용하여 모바일 애플리케이션을 만들려고합니다. 조금 까다로울 수 있습니다. 해시 태그와 URL을 JQuery와 모바일 작품 아코디언 작동하도록하기 때문에, 각도가 해석됩니다

<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와 모바일로하지만, 각 JS로 NG 반복 지시어로 동적 아코디언 구축을 위해 노력하고 있습니다 url이 변경되어 페이지 뷰가 다시로드되므로 collapsible이 결코 열리지 않습니다. 몇 가지 jquery 모바일 기능을 사용 중지 해 보았습니다.

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

아코디언에는 작동하지 않는 것으로 보입니다. 우리가 전에 가지고 있던 라우팅 문제를 해결했습니다. jqm과 각도를 함께 사용하기위한 어댑터가 있지만 타사 소프트웨어에 의존하지 않아도됩니다. 앵귤러 앵글 js와 jqm을 함께 사용하는 습관에 대한 의견은 실용적입니다. 또한 모바일 사이트 용으로 하나만 사용하도록 선택해야한다면 어느 것이 좋습니다? 이유는 무엇입니까?

도움 주셔서 감사합니다.

Answer 1

accordian을 수행하는 데 jquery가 필요하지 않습니다. ng-click과 ng-class를 사용하여 open-close 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; 
} 

Answer 2

페이지가로드 한 후 스크립트에서 사업부 컨테이너

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