Recursion in Angular directives

Question

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 \

Answer 1

I ended up creating a set of basic directives for recursion.

IMO It is far more basic than the solution found here, and just as flexible if not more, so we are not bound to using UL/LI structures etc... But obviously those make sense to use, however the directives are unaware of this fact...

A Super simple example would be:

  

    {{ node.name }}
    

  

The implementation of 'dx-start-with' an 'dx-connect' is found at: https://github.com/dotJEM/angular-tree

This means you don't have to create 8 directives if you need 8 different layouts.

To create a tree-view on top of that where you can add or delete nodes would then be rather simple. As in: http://codepen.io/anon/pen/BjXGbY?editors=1010

angular
  .module('demo', ['dotjem.angular.tree'])
  .controller('AppController', function($window) {

this.rootNode = {
  name: 'root node',
  children: [{
    name: 'child'
  }]
};

this.addNode = function(parent) {
  var name = $window.prompt("Node name: ", "node name here");
  parent.children = parent.children || [];
  parent.children.push({
    name: name
  });
}

this.removeNode = function(parent, child) {
  var index = parent.children.indexOf(child);
  if (index > -1) {
    parent.children.splice(index, 1);
  }
}

  });

  HELLO TREE
  

Add

  {{ node.name }} 
  Remove
  


  

  
  

From this point on, the controller and template could be wrapped in it's own directive if one would wish for it.