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.

Answer 1

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

Answer 2

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