Allow me to explain the situation, it may seem a bit intricate. I have structured my directives in three layers:
- At the top layer, there is a popup directive
- In the middle layer, there is a
switch-panedirective * - The bottom layer consists of various views
The top layer serves as a wizard within my application.
The middle layer is a directive that functions as a stack of views - you can "push" and "pop" views. The topmost view is displayed while the rest are pushed aside and blurred.
The bottom layer comprises multiple views that are typically unrelated to each other, dynamically loaded and shown in the switch-pane based on user interaction.
The existing setup works well, HOWEVER: currently, the array property in the $scope of the top layer represents all the views that the switch-pane should display. This array is passed to the switch-pane directive as an attribute, which then watches for changes and updates itself accordingly.
Though functional, this approach does not seem optimal - ideally, I would like the switch-pane directive itself to handle its stack of views and only expose a push and pop API.
I have considered a few potential solutions:
- Utilizing
$broadcast/$emit- whereby the top layer broadcasts a "push" event, captured by theswitch-panefor processing - Implementing a service to subscribe and trigger the "push" event (similar to
$broadcast, but limited in scope) - Employing a service that allows the
switch-panedirective to define its own API, possibly through attributes or element IDs - Using
angular.element().scope()to access the inner workings of theswitch-pane
To be honest, none of these methods feel entirely satisfactory. I certainly wish to avoid reliance on the DOM, making the last two options less desirable.
Are there any alternative approaches to tackle this? What would be the most angular-esque method to expose a directive's API, given our limitation in accessing a specific instance of a directive directly without involving the DOM?