Handle open/collapse events of Accordion in Angular

Question

If I have this code:

      {{group.content}}

         


        

Answer 1

You can do it w/ an Angular directive:

html

  

    some heading text
  
  
  
  
    
    
      here is the body
    
  

js

app.directive("mydirective", function() {
  return {
    restrict: "EAC",  
    link: function(scope, element, attrs) {
      /* note that ng converts everything to camelCase */
      var model = attrs["mydirectiveModel"];
      var index = attrs["mydirectiveIndex"];
      var watched_name = model + "[" + index + "].display_detail"
      scope.$watch(watched_name, function(is_displayed) {
        if (is_displayed) {
          alert("you opened something");
        }
        else {
          alert("you closed something");
        }
      });
    }
  }
});

There are some idiosyncrasies about my setup there (I use Django, hence the "{% verbatim %}" tags), but the method should work.