There are a couple of popular recursive angular directive Q&A's out there, which all come down to one of the following solutions:
- manually incrementally 'compile' HTML based on runtime scope state
- example 1 [stackoverflow]
- example 2 [angular jsfiddles page]
- don't use a directive at all, but a <script> template which refers to itself
- example 1 [google groups]
The first one has the problem that you can't remove previously compiled code unless you comprehensibly manage the manual compile process. The second approach has the problem of... not being a directive and missing out on its powerful capabilities, but more urgently, it can't be parameterised the same way a directive can be; it's simply bound to a new controller instance.
I've been playing with manually doing an
@compile() in the link function, but that leaves me with the problem of manually keeping track of elements to remove and add.
Is there a good way to have a parameterized recursive pattern that manages adding/removing elements to reflect runtime state? That is to say, a tree with a add/delete node button and some input field whose value is passed down a node's child nodes. Perhaps a combination of the second approach with chained scopes (but I have no idea how to do this)?