javascript - Add ng-click event to angular-ui accordion - Stack Overflow

admin管理员组

文章数量:1289877

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

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

• javascript
• html
• twitter-bootstrap
• angularjs
• angular-ui

Share Improve this question Follow edited Aug 26, 2013 at 17:39 madth3 7,3441212 gold badges5252 silver badges7474 bronze badges asked Aug 23, 2013 at 4:59 Rusty RobRusty Rob 17.2k1010 gold badges103103 silver badges121121 bronze badges 1

• possible duplicate of Handle open/collapse events of Accordion in Angular – Rusty Rob Commented Aug 23, 2013 at 5:24

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 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.

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>

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.

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

本文标签： javascriptAdd ngclick event to angularui accordionStack Overflow