Anklickbare Panels in voller Größe auf Angular UI Accordion (?)

Question

Die Frage ist einfach und ich weiß nicht, warum ich nicht das Verhalten bekomme, das ich will, das ist die Angular UI Bootstrap accordion that I am using, aber wie Sie an diesem Beispiel sehen können Weg, um das Akkordeon zu öffnen ist, wenn Sie auf den Titel klicken, und das ist nicht das, was ich will, jetzt Blick auf this example, this is what I want, es spielt keine Rolle, wo Sie auf das Panel klicken, wird das Panel nur öffnen, ob Sie auf den Titel klicken oder nicht .

und hier ist der Code ich verwende:

<accordion close-others="false"> 
     <accordion-group class="fx-fade-right fx-speed-300" 
     ng-repeat="sport in sports | filter:query" 
     ng-show="sport.leagues.length"> 
      <accordion-heading> 
      {{::sport.name}} 
      <span class="pull-right badge">{{::sport.leagues.length}}</span> 
      </accordion-heading> 
      <div class="list-group leagues-margin" 
      ng-click="addSportToLines(sport)"> 
      <a href="javascript:void(0);" class="list-group-item" 
       ng-repeat="league in sport.leagues" 
       ng-class="{active: league.active}" 
       ng-click="addLeagueToLines(league)">{{::league.name}} 
      </a> 
      <a href="javascript:void(0);" 
       class="list-group-item list-group-item-danger" 
       ng-hide="sport.leagues.length">No Leagues 
      </a> 
     </div> 
     </accordion-group> 

Answer 1

eigentlich ich, dass gerade herausgefunden, legen Sie einfach den accordion-heading Inhalt in einen div:

 <accordion-heading> 
     <div> 
      {{::sport.name}} 
      <span class="pull-right badge">{{::sport.leagues.length}}</span> 
     </div> 
     </accordion-heading>