I am in the process of creating a custom directive that will ensure only one element is active at a time.
Directive: displayOneAtATime
Description: This directive can be applied to a DOM node to guarantee that only one element with this directive can be visible simultaneously.
Usage:
<body>
<div id="one" display-one-at-a-time></div>
<section>
<div id="two" display-one-at-a-time></div>
</section>
</body>
In this scenario, "two" would be the visible element... Now picture a situation where an external event triggers a jqLite .remove() on the section element. How can I detect the removal of "two" and then show "one" again?
angular.module('SWS')
.directive('swsOneAtATime', ['$log', '$interval', function($log, $interval) {
var elements = [];
return function(scope, elem, attrs) {
if (elements.length > 0) {
_.each(elements, function(e) {
e.css('visibility', 'hidden');
});
}
elem[0].addEventListener('DOMNodeRemoved', function(ev) {
// THIS DOM EVENT WILL NOT TRIGGER...
if ('hidden' != elem.css('visibility')) {
elements.splice(elements.indexOf(elem), 1);
elements[elements.length].css('visibility', 'visible');
}
}, false);
elements.push(elem);
};
}]);