Angular UI Accordion

Question

I'm trying to find out how to watch Angular UI's accordion is-open event so I can have a call back when ever any of my accordions are closed.

This is the basic structure of my accordion's (refined just to show one.)
One thing to note is that these are actually static content, nothings dynamic.

<accordion-group is-open="true">

  <accordion-heading>
    <h3>Some Header</h3>
  </accordion-heading>

  <h4>Some pretty awesome content!</h4>
</accordion-group>

My controller

.controller('AccordionDemoCtrl', function ($scope) {
  $scope.oneAtATime = true;    
  $scope.$watch('groups[0].open', function (isOpen) {    
    if (!isOpen) {    
      console.log('First group was opened');    
    }
  });  
});

Heres a demo I'm getting the console.log to fire once upon load, but not when I close any other accordions. Any ideas? Any help is appreciated.

Can you create a sample for us? – SomeKittens Apr 01 '14 at 20:51 — SomeKittens, Apr 01 '14 at 20:51
http://plnkr.co/edit/teiTTl?p=preview – mhartington Apr 01 '14 at 21:01 — mhartington, Apr 01 '14 at 21:01
Awesome, I was able to figure out a solution for you. – SomeKittens Apr 01 '14 at 21:17 — SomeKittens, Apr 01 '14 at 21:17

score 1 · Accepted Answer · edited May 23 '17 at 11:49

I'm assuming you're finding the code here. That isn't working for you, because you're not using ng-repeat to generate your accordions. Instead, bind to the is-open attribute:

angular.module('plunker', ['ui.bootstrap']);

function AccordionDemoCtrl($scope) {
$scope.oneAtATime = true;    
$scope.first = {
  open: true
}
  $scope.$watch('first.open', function (isOpen) {      
    console.log('First group was toggled');    
  }); 
}

Relevant HTML:

 <accordion-group is-open="first.open">

  <accordion-heading>
    <h3>Some Header</h3>
  </accordion-heading>

  <h4>Some pretty awesome content!</h4>
</accordion-group>

Plunk

This is great, thanks for the answer, but I do need to function to run when ever the accordion is toggled. Any ideas for that? — mhartington, Apr 03 '14 at 17:00

score 0 · Answer 2 · answered Apr 01 '14 at 21:13

0

Why are you not using a ng-click event ? That's clearly better to bind your function on the "click" event than watching it. So, if you can avoid it..

answered Apr 01 '14 at 21:13

Peekmo

2,843
2
19
25

`ng-click` won't work in this scenario. He only wants it to be triggered on open, not any click. – SomeKittens Apr 01 '14 at 21:15
Actually a click event would work, since the even will fire when the accordion opens and closes. I'm using a customs scrolling container for some mobile events, but for its size to update, I need to call it manually. So I created a simple function to do this but when I try to place the ng-click on the `accordion-group`, it doesn't fire. http://plnkr.co/edit/teiTTl?p=preview – mhartington Apr 02 '14 at 13:39

Angular UI Accordion

2 Answers2