Add ng-click event to angular-ui accordion

Question

I'm using angular-ui and have started using accordions.

I need to fire an ng-click event when someone opens or closes an accordion group.

I did some research and found this thread: angular-ui issue

It linked to a plunker which shows a solution which isn't satisfactory for my use case.

Here is the solutions html:

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

However the ng-click event only fires if you click on the span text. If you click just outside of the text the accordion still opens or closes without any click event.

To fix this I tried making the spans width & height 100% and setting display: block. I also considered removing the padding entirely but I was wondering if there is a better way than hacking at it.

Does anyone know how to attach the ng-click event to the entire accordian group? Or how to make the span fill the entire group?

My entire code:

  <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 }}

Answer 1

Why do you need ng-click specific solution? There is an is-open attribute which you can watch for, and which triggers on opening/closing of an accordion.

Answer 2

If you are using new versions of Angular, an event called isOpenChange, handle it.

<accordion>
  <accordion-group (isOpenChange)="foo()">
   <button class="btn btn-link btn-block clearfix" accordion-heading type="button">
    <div class="pull-left float-left">Header Title</div>
   </button>

   <div>Some Body 3</div>
 </accordion-group>
</accordion>