0

Background: I am trying to setup a tree view from a JSON schema - I do this using directive schema-tree as I setup in this code. Within the view I am trying to transclude DOM elements so that this treeview can be reused. However, since there is a copy of the transcluded DOM for each endpoint, I need to determine which copy of the transcluded DOM in the recursion has been accessed.

Problem: However, my attempts at accessing the this scope have failed. The best I have come up with is to modify the scope in the compile function of the directive but this changes the transclude scope only to the value of first invocation of the directive and not recursively for every invocation.

Code: Please find Plunker here: http://plnkr.co/edit/3wmUbMTPNuBHXYOKHsho?p=preview In this code schema-tree is a recursive tree in which I am trying extract path variable for each recursion upon the button click. I can get the path within each directive but not in the associated Transcluded DOM where I get only .root.

Question: What am I doing wrong? How can I access the path of the immediate parent in the transcluded DOM.

On a related note should I use another approach to solve this problem?

Thanks in advance!!!!!!!

Rahul Gupta
  • 91
  • 1
  • 8
  • You what to access for what? – Sergey Romanov Jan 11 '15 at 14:25
  • @SergeyRomanov: First, sorry if I am not clear. Please see that in my code each `schemaTree` tag has a `path` variable in which I store the route that has been taken to reach that particular branch - giving each branch a unique identifier. I want access this `path` in the transcluded DOM, so that any function that I included in transcluded DOM knows exactly which branch has accessed the function -> if I press a button under **CORE** **tags**, the `vc.hi` function displays the path *.root.core.tags* in the console. Presently it'll only display *.root* for all which negates the purpose. – Rahul Gupta Jan 11 '15 at 22:29
  • That was my question. For what. Ok, it nows but what would be the action? Actually you do not need to know path. because each iteration of ngRepeat creates new scope. So you can perfectly safe to have function inside the scope that will have only current object. To me you are trying to use angular - the PHP way. – Sergey Romanov Jan 12 '15 at 03:15
  • You are right about `ngRepeat` but this does not hold true for transclusion (Transclusion gives flexibility to make components general purpose). Transclusion will hold the scope of `viewCtrl` and **not** `ngRepeat` (this is by design in angular) - which is why I can call in the transcluded DOM `vc.hi()` inspite of using isolate scope in the `schema-tree` directive. As a result the transclusion scope does not know path and has to be provided this info separately. I am all ears for another solution but it must give a treeview that can include in it any arbitary function for each branch/leaf. – Rahul Gupta Jan 12 '15 at 13:02
  • But why do you need to use a transclusion here? Even by your explanation it sounds that you have to achieve this without trasclusion then. – Sergey Romanov Jan 13 '15 at 03:48
  • I definitely need transclusion, otherwise the tree view cannot be reused. Suppose in one case I have an input at each leaf to construct a partial object based on the schema. In another case I need to select leafs and have a check box. Now either I can build two treeviews respectively with input box and check box OR I can create a common tree view and transclude an input or check box and use those to create partial objects instead from my schema. I think its a fair goal to keep the code DRY. – Rahul Gupta Jan 13 '15 at 19:56
  • You can turn checkbox into parameter. Add attribute and show checkboxes it is true. thus you create dynamic directive that can change view dynamically based on parameters. So you can turn simply tryy into checkbox tryy with a single button click without changing directive or template. – Sergey Romanov Jan 14 '15 at 10:43
  • @SergeyRomanov Thanks!!! What you suggest is a good work around though not what I am exactly after. Ideally I would like to create a component where the programmer (ie me) is free to add their own design at tree branch/leaf. In your solution I might end up adding many parameters - one for each DOM element, not exactly a clean effort at making the `tree` generic. But, the absence of transclusion what you suggest is definitely the next best thing. – Rahul Gupta Jan 14 '15 at 21:42
  • Then use template. Create ` – Sergey Romanov Jan 15 '15 at 13:28

0 Answers0