javascript - angular-uiアコーディオンにng-clickイベントを追加

Question

angular-uiを使用しており、アコーディオンの使用を開始しました。

ng-click誰かがアコーディオン グループを開いたり閉じたりしたときに、イベントを発生させる必要があります。

私はいくつかの調査を行い、このスレッドを見つけました: angular-ui issue

私のユースケースには満足できない解決策を示すプランカーにリンクしました。

ソリューションのhtmlは次のとおりです。

<accordion>
  <accordion-group>
      <accordion-heading>
          <span ng-click="foo()">Try clicking me!</span>
      </accordion-heading>
      Some Body 3
  </accordion-group>
</accordion>

ただし、ng-click イベントは、スパン テキストをクリックした場合にのみ発生します。テキストのすぐ外側をクリックすると、アコーディオンはクリック イベントなしで開いたり閉じたりします。

これを修正するために、スパンの幅と高さを 100% にして、display: block を設定してみました。パディングを完全に削除することも検討しましたが、ハッキングするよりも良い方法があるかどうか疑問に思っていました.

アコーディオン グループ全体に ng-click イベントをアタッチする方法を知っている人はいますか? または、グループ全体をスパンで埋める方法は?

私のコード全体:

  <accordion close-others="true">
    <accordion-group ng-repeat="question in level">
        <accordion-heading style="padding: 0">
            <div style="display: block; margin: 0px" ng-click="set_question(question.title)">{{ question.title }}</div>
            <i class="icon-check" ng-show="has_solved_all"></i>
        </accordion-heading>
        <span ng-bind-html-unsafe="question.content"></span>
    </accordion-group>
  </accordion>
    <br>
    Question Open: {{ question_open }}