Having trouble implementing stopPropagation while working with multiple drop down menus. I want the menu to toggle off when clicked outside, and only one menu open at a time so that opening another closes the first.
If my approach is wrong, any guidance in the right direction would be appreciated!
Thank you!
This is how I'm currently handling the drop menus:
<a ng-click="popout.isVisible = !popout.isVisible">Drop Menu #1</a>
<ul ng-show="popout.isVisible">
<li>This is some text.</li>
<li>This is some text.</li>
<li>This is some text.</li>
</ul>
<a ng-click="popout.isVisible = !popout.isVisible">Drop Menu #2</a>
<ul ng-show="popout.isVisible">
<li>This is some text.</li>
<li>This is some text.</li>
<li>This is some text.</li>
</ul>
Attempted to use a stopEvent directive found in code, but it's not functioning as needed:
myApp.directive('stopEvent', function () {
return {
link: function (scope, element, attr) {
element.bind(attr.stopEvent, function (e) {
e.stopPropagation();
alert('ALERT!');
});
}
};
});