Expressing my query might pose some difficulty, but I appreciate your patience.
I comprehend that in the realm of Angular.js, directives play a crucial role in driving dynamic markup. What was once achieved through jQuery can now be accomplished using directives. The HTML compiler in Angular scans the DOM seeking attributes and/or elements corresponding to programmed directives, attaching these elements to their respective directives. My inquiry lies in whether it's possible to establish this connection, generating directive-bound DOM elements without the directive initially existing within the DOM.
Consider a scenario where I aim to use a directive to construct an intricate seating chart complete with sections, rows, seats, et cetera. This chart could exhibit various seating layouts based on venue specifications, necessitating the template to dynamically render the chart from data representing each UI component on the chart. I'm unclear on the approach one should take in achieving this utilizing Angular.
Would utilizing a single directive to assemble the entire UI be practical, or would employing nested directives be more suitable? (My instincts lean towards the latter.) If going down the path of nested directives, what is a sound method for structuring them programmatically independent of markup?