CODEWITHSUNDEEP
javascripthtmltwitter-bootstrapangularjsangular-ui
Rusty Rob
Rusty Rob

Reputation: 17173

Add ng-click event to angular-ui accordion

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

Upvotes: 6

Views: 13643

Answers (4)

Mohammed Osman
Mohammed Osman

Reputation: 4236

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>

Upvotes: 1

haya
haya

Reputation: 11

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().

Upvotes: 0

milkyway
milkyway

Reputation: 53

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.

Upvotes: 0

0xc0de
0xc0de

Reputation: 8287

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.

Upvotes: 3

Related Questions