동적 데이터가있는 부트 스트랩 아코디언이 제대로 작동하지 않습니다.

Question

내 웹 앱에 내가 원하는대로하지 않는 부트 스트랩 아코디언이 있는데 동적 데이터를 전달하고 있으며 아코디언 사용법을 알고있는 경우 data-target 또는 href 속성이 있고 패널 본체의 부모 요소에 div id 속성이 있습니다.

내 코드에서

확인보기 :

<div class="panel panel-default" ng-repeat="sport in sports"> 
    <div class="panel-heading" ng-click="addSportToLines(sport)" 
     data-toggle="collapse" 
     data-parent="#accordion" 
     data-target="{{sport.id}}"> 
     <h4 class="panel-title"> 
     <a> 
      {{::sport.name }} 
     </a> 
     </h4> 
    </div> 
    <div id="{{sport.id}}" class="panel-collapse collapse" role="tabpanel"> 
     <div class="panel-body"> 
     <div class="list-group leagues-margin" 
      class="list-group-item" 
      ng-repeat="league in sport.leagues" 
      ng-click="addLeagueToLines(league)">{{:: league.name}} 
     </div> 
     </div> 

이 케이스 {{sport.id}}에서 당신이 내 브라우저에서 요소 검사를 넣으면 볼 수 있듯이 .panel-body의 부모 요소에서 동일한 id 인 data-target입니다 모든 단일 요소는 독특하고 다른 id으로 나타나며 그 이유는 여기에서 묻습니다. 모든 것이 옳은 것처럼 보이지만 내 아코디언의 동작이 적절하지 않기 때문에 매우 이상합니다. 아코디언이 패널을 열지 않습니다. 어떤 제안이 있습니까?

두 번째 질문 : Angular-Strap을 사용하고 있으며 프로젝트가 거의 끝났습니다. Angular Bootstrap UI로 전환 할 수 없으므로 Angular Bootstrap UI를 추가 할 수있는 방법이 있습니까? 앵글 스트랩? 어제 시도했지만 일부 충돌이 발생하고 Angular Bootstrap UI의 아코디언/붕괴 플러그인이 필요합니다. 앵귤러 스트랩 붕괴를 사용하지 않는 이유는 플러그인에서 찾고있는 동작이 없기 때문입니다. 에 대한.

Answer 1

tldr; 오리지널 bootstrap.js를 각도와 혼합하지 말고 대신 부트 스트랩 위젯을 구현하는 각도 모듈을 사용하십시오.

부트 스트랩 원래 구성 요소를 각도로 섞어 놓은 것처럼 보입니다. DOM 조작을 지시어로 묶지 않는 한 각도를 사용하는 경우 다른 라이브러리에서 DOM을 조작해서는 안됩니다.

부트 스트랩 구성 요소의 동작을 구현하는 일부 각도 모듈이 있습니다. 나는 UI Bootstrap을 사용합니다.