Add ng-click event to angular-ui accordion

angular accordion open event
uib-accordion
angular 6 accordion example

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

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.

Accordian, Is it possible handle a click with an accordion-group like this: accordion-group ng -click="foo()" It looks like it is not working because the directive� Is it possible handle a click with an accordion-group like this: accordion-group ng-click="foo()" It looks like it is not working because the directive eats the click for expanding/collapsing. In looking at the directive code and template, it was not clear to me how to "bubble" this event so it could still be used by the parent.

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.

Angular ng-click Directive, An expression to execute when an element is clicked. More examples. Example. Execute a function, in AngularJS, when a button is clicked: <� This content is straight in the template. {{group.content}} The body of the uib-accordion group grows to fit the contents. Add Item

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

angular-ui-bootstrap * http://angular-ui.github.io/bootstrap/ * Version , bindHtml","ui.bootstrap.buttons","ui.bootstrap.carousel" and adds an accordion CSS class to itself element. .directive('accordion', function () { return @name ui. bootstrap.carousel * * @description * AngularJS version of an image carousel. The ng-click in my controller gets called for each item in garageCtrl.garages for starters, and again a few times for each click. The same html with a pure angular controller works as expected. one click event per click on the item. my yaml: name: md_angularuitestversion: 0.1.0description: Demo of Angular-UI to Dart.environment:

ui.bootstrap.accordion, But in AngularJS adding empty href attributes to link tags will cause unwanted is due to browsers interpreting anchor elements as the target of any click event,� 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.

Adding a ng-click attribute to the header value of an accordion group , I thought a good way to do this was to pass the click $event into the ng-click Open Bootstrap UI Accordion Generated by Nested Ng-Repeat when Filtered� The directive accordion doesn't define scope, so its scope is the one from outside controller. transclude:true makes Angular create a child scope for directive template . But since the name on outside controller is a primitive type, setting the value inside template will create a new name on the child scope.

Can I click anywhere on the header using Angular UI accordion , I finally figured it out. Just needed to add ng-click="$event.stopPropagation();" to the anchor. Vertical AngularJS Accordion side-� and when i click on header to roll over content of accordion bootstrap i get that drag and drop event is handled how could i: add to accordion-header some icon, with the help of which i could drag and drop all my nodes, and when i click on title my data get rolled as bootstrap do?

Comments
  • possible duplicate of Handle open/collapse events of Accordion in Angular
  • 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.
  • oops - looks similar. In any case - I think we can mark this question as duplicate.
  • is it a good idea to use $watch. As angular does not encourage using $watch. as we are interfaring with the digest cycle.