It's a common occurrence, for example, when you click on the inbox here on stackoverflow. I refer to the dialog or popup that appears as a thing.
There are two methods I am aware of to handle this:
- Creating an invisible overlay where the opened element has a higher z-index, and closing the thing by clicking on the overlay.
- Using a click event on the document to determine if the click was inside or outside the thing, and closing it accordingly.
In both cases, I would prefer to utilize ng-class to toggle the visibility of the thing.
How can I achieve this with Angular, so that it can be applied to any component (thing) I may add? It's not just one modal, but potentially multiple components with varying HTML structures and positions.
Which approach would be more efficient - document event, overlay, or something entirely different?
Considering that Angular does not have direct access to the DOM, the document event approach could pose challenges in determining if the click was on the thing element. This could be resolved by giving every thing the same class.
On the other hand, the overlay approach does not require direct references to DOM elements.
Both approaches would necessitate a unique variable in the $rootScope for ng-class to function properly. This raises the question of whether to stick with ng-class or opt for a custom solution.
These are just some initial thoughts - perhaps there is a different perspective to consider. Has anyone encountered this scenario before?