One of my directives is responsible for expanding and collapsing the height of a div. Since this directive is used multiple times on the page, I want to ensure that when a user opens one box, it closes any other open boxes. My initial thought was to emit an event, but the issue arises when the directive itself also responds to the event, causing all divs to close.
Is there a way to ignore messages that originate from the same directive?
angular.module('cinemaApp')
.directive('expand', function ($rootScope) {
return {
restrict: 'A',
link: function postLink(scope, element, attrs) {
$rootScope.$on('contract', function(payload) {
element.css('height', attrs.fixedheight);
});
scope.$watch('open', function(value) {
element.css('height', (value ? 'auto' : attrs.fixedheight));
$rootScope.$emit('contract');
});
element.css('height', attrs.fixedheight);
}
};
});