I wanted to create an angular app that could visualise any json file, so this explains the need for recursion. I did this with recursive templates.
However, I wanted to be able to extract potential edits to the json input, so that complicated things further. I have made it work, but not without doing a few things that would be considered red flags. It feels to me like they were necessary sacrifices, but I would like to be verified or corrected in that, for the sake of learning Angular better. The working code is here: http://plnkr.co/edit/30ST5BpBp2aAszeVdXNc?p=preview Here's a (partial?) list of red flags you'll find in the code: 1. $rootScopeProvider.digestTtl(16); The first thing I found was that the json depth that can be rendered was limited by the digest limit. The current test file, with 5 levels of recursion needs (5*3)+1 digest levels, hence 16. But for general use I'd have to disable the digestTtl altogether (perhaps pass Infinite?) 2. ng-repeat="value in value" For the next level of the recursion to find the data where it was in the previous one, this 'interesting' substitution has to be made. As far as I can tell, this is completely kosher in Angular, as the first instance of value is in the child scope, whereas the second is in the parent. 3. ng-init="key = $index" While this is the 'proper' use of ng-init, that is to say in combination with an ng-repeat, I feel aliasing $index is probably stretching it. 4. ng-model="$parent.$parent.$parent.value[key]" Since there are three levels of scope created for each round of recursion (ng-repeat, template, ng-switch) there need to be three levels of parent climbed for the original value to be tracked by reference rather than by value. This is needed to avoid copy-on-write which would block extracting the full (edited) json file later without gobs of code. The use of [key] also takes advantage of the fact that js addresses objects and arrays in the same way. So this, then, is the question: Is there a way to do this that raises fewer less flags, without adding reams of code to the current solution? I'm quite happy to have made this work, but I would like to see if there is a more correct solution. Improving the performance would be a definite plus. Your thoughts are welcome. -- You received this message because you are subscribed to the Google Groups "AngularJS" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/angular. For more options, visit https://groups.google.com/groups/opt_out.
