4

I have an application that has set of data that has a recursive relationship (a tree view, using recursion.) I've tried several ways to implement this via Angular, none of which seem to render a viable result.

The idea here is that I wish to have this data rendered using a set of nested lists, allowing for numerous (7+) levels of depth. To simplify things (my actual application uses Restangular) I've built the following plunker:

http://plnkr.co/edit/dKT9OvpsMgnxmLwgF0ij

While the "top" level data renders correctly (just the first title) my attempt to recurse using nested controllers seems to fail miserably. The idea here is that each "child" in the tree is rendered using it's own controller, which can then render it's children, and so-on and so-forth. I realize that nested controllers might not be the "best" way to go, but after much searching I haven't found a "better" alternative.

It's important that the resulting solution preserves the concept of "nesting" here (each element appearing below its parent element, with a slight indent.)

chander
  • 1,997
  • 2
  • 16
  • 15
  • Have you seen this https://gist.github.com/furf/4331090 , http://stackoverflow.com/questions/15661289/how-can-i-make-recursive-templates-in-angularjs-when-using-nested-objects. – Chandermani Aug 24 '13 at 05:35

3 Answers3

12

rather than nest your controllers, nest the data and just have the one controller.

the view is handled by a template that references itself recursively.

as chadermani has linked to, there are some answers out there.

here is a fiddle with a great example (not my code)

http://jsfiddle.net/brendanowen/uXbn6/8/

and the code from the fiddle

<script type="text/ng-template"  id="tree_item_renderer.html">
    {{data.name}}
    <button ng-click="add(data)">Add node</button>
    <button ng-click="delete(data)" ng-show="data.nodes.length > 0">Delete nodes</button>
    <ul>
        <li ng-repeat="data in data.nodes" ng-include="'tree_item_renderer.html'"></li>
    </ul>
</script>

<ul ng-app="Application" ng-controller="TreeController">
    <li ng-repeat="data in tree" ng-include="'tree_item_renderer.html'"></li>
</ul>

angular.module("myApp", []).
controller("TreeController", ['$scope', function($scope) {
    $scope.delete = function(data) {
        data.nodes = [];
    };
    $scope.add = function(data) {
        var post = data.nodes.length + 1;
        var newName = data.name + '-' + post;
        data.nodes.push({name: newName,nodes: []});
    };
    $scope.tree = [{name: "Node", nodes: []}];
}]);
Anton
  • 7,709
  • 5
  • 31
  • 33
  • I tried this - but it does not work with current versions of angular (it was written with an older version.) I made a JSFiddle using the latest version of angular, and the same code at http://jsfiddle.net/PLRCz/ - aside from it not working with angular 1.2, this is a nice solution! – chander Aug 24 '13 at 14:11
  • Thanks. I've downgraded to an earlier unstable release and it works. Looks like it's broken in Angular 1.2 – chander Aug 25 '13 at 21:54
  • This was due to a bug in the release candidate. Upgrade to a newer RC or 1.2 if it's actually been released. – Samuel Oct 23 '13 at 04:19
  • one optimization is to use `ng-if` to prevent creating `ng-repeat` for "leaf" nodes like i did [here](http://stackoverflow.com/a/23596300/918858).. updated [jsfiddle](http://jsfiddle.net/7WPD3/2/) that shows what i mean – Dexter Legaspi May 22 '14 at 16:28
1

If you are familiarized with batarang tool, it has a treeview of scopes. You can see the source here:

https://github.com/angular/angularjs-batarang/blob/master/js/directives/scopeTree.js

The idea is simple. Using $compile to recursively render that directive for every children it finds until there is no more children to render.

I saw that same idea for other alternatives, take a look here:

Is it possible to make a Tree View with Angular?

Community
  • 1
  • 1
Jesus Rodriguez
  • 11,918
  • 9
  • 64
  • 88
-1

Try this for a nice clean example

http://codrspace.com/build80/create-recursive-tree-structure-using-template-in-angularjs/

Pankaj Bodani
  • 1