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

possible duplicate of [Handle open/collapse events of Accordion in Angular](http://stackoverflow.com/questions/15642082/handle-open-collapse-events-of-accordion-in-angular) — Rusty Rob, Aug 23 '13 at 05:24

score 3 · Accepted Answer · answered Aug 23 '13 at 05:07

3

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.

answered Aug 23 '13 at 05:07

0xc0de

8,028
5
49
75

1

Perhaps I can use is-open. I'm searching documentation now. My problem more specifically is I have an ng-repeat="question in questions". Each question opens up in an accordian. Then down the bottom of the page it says which question you're viewing. – Rusty Rob Aug 23 '13 at 05:15
1

oops - looks similar. In any case - I think we can mark this question as duplicate. – Rusty Rob Aug 23 '13 at 05:22
is it a good idea to use $watch. As angular does not encourage using $watch. as we are interfaring with the digest cycle. – Ankur Soni May 23 '16 at 12:47

score 1 · Answer 2 · answered Jan 14 '21 at 10:31

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>

score 0 · Answer 3 · answered Jun 07 '17 at 00:14

Create a top level div under accordion heading or move

<i class="icon-check" ng-show="has_solved_all"></i>

inside the div element -

<div style="display: block; margin: 0px"

This should do the magic. Below works for me-

<accordion-group ng-repeat="group in groups" >
  <accordion-heading>
    <div ng-click="opened(group, $index)">
      <span>{{group.title}}</span>
    </div>
  </accordion-heading>
  {{group.content}}
</accordion-group>

Modify and verify in the plunker http://plnkr.co/edit/B3LC1X?p=preview console log. I know the question is old but others can use this answer.

score 0 · Answer 4 · answered Feb 21 '19 at 10:20

If you entend to add another click with the one existe of the the open event. I suggest to add the directive bellow inside the tag:

myApp.directive('functionClick',function(){
    return{
        restrict: 'E',
        terminal: true,
        controller: 'NameOfController',
         templateUrl: "templateFunctionClick.html",
        link: function($scope, $element, $attrs, $ctrl){
        }
    }

});

<accordion-group  is-open="status.open">
  <accordion-heading >
    {{headerName}}
    <function-click></function-click>
  </accordion-heading>
</accordion-group>

Where the templateFunctionClick.html:

<a ng-click="$event.stopPropagation();clickMeFunction()" ><span>Click Me!</span> </a>

be sure to add $event.stopPropagation(); in order to don't call in same time the click of toggelOpen().

Add ng-click event to angular-ui accordion

4 Answers4