Angular UI手风琴上的全尺寸可点击面板(？)

Question

问题很简单,我不知道为什么我没有得到我想要的行为,这是我正在使用的Angular UI Bootstrap手风琴,但正如你在这个例子中所看到的,打开手风琴的唯一方法是if你点击标题,这不是我想要的,现在看看这个例子,这就是我想要的,无论你点击面板在哪里,面板都会打开你是否点击标题.

这是我正在使用的代码:

    <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

实际上我只是想出来,只需将accordion-heading内容放入div:

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