Chapter 9
};
this.addGroup = function(groupScope) {
var that = this;
this.groups.push(groupScope);
groupScope.$on('$destroy', function (event) {
that.removeGroup(groupScope);
});
};
this.removeGroup = function(group) {
var index = this.groups.indexOf(group);
if ( index !== -1 ) {
this.groups.splice(this.groups.indexOf(group), 1);
}
};
}]);Notice that we automatically remove the group from the list when its scope
is destroyed. This is important because our list of groups may be generated
dynamically at run-time using an ng-repeat directive, which could remove
elements and so group scopes from the application. If we still held references
to the these group scopes then they could not be garbage collected.
Implementing the accordion directive
The main accordion directive just specifies AccordionController as its directive
controller and adds an accordion CSS class to its element in its link function:
myModule.directive('accordion', function () {
return {
restrict:'E',
controller:'AccordionController',
link: function(scope, element, attrs) {
element.addClass('accordion');
}
};
})Implementing the accordion-group directive
Each collapsible group will be defined by an accordionGroup directive. Each group
consists of a link and a body. Here is the template for this directive:
<div class="accordion-group">
<div class="accordion-heading" >
<a class="accordion-toggle"