Support recursive trees of directives

[caitp]

I had some ideas about implementing this during the meeting, so I might have a go at bikeshedding something over the next few weeks.

What it comes down to is basically conditionally inserting DOM into a compiled template, based on some state. Sort of an implicit ng-if that gets resolved at compile-time, or else prevents ng-if from recursively linking the same template.

Anyways, I'd like to sort out a way to do that because it's a pretty cool and useful structure, and other implementations (like http://caitp.github.io/ui-comments/#/) have depended on some ugly hacks which are better to avoid.

I'm sure this has been proposed already, but I can't find any of those issues right now.

Anyways, I'll throw something together and people can see what they think

use cases

• Comments
• Org-charts
• Graphs
• Product charts
• etc...

[lgalfaso]

@caitp we use a directive that looks somehow like this

mainModule.directive("recursive", ['$compile', function ($compile) {
  return {
    restrict: "EAC",
    priority: 100000,
    compile: function (tElement) {
      var contents = tElement.contents().remove(),
        compiledContents;
      return function (scope, iElement) {
        if (!compiledContents) {
          compiledContents = $compile(contents);
        }
        compiledContents(scope, function (clone) {
          iElement.append(clone);
        });
      };
    }
  };
}]);

[caitp]

there are workarounds, but they literally all suck, every single one of them. Code like that is terrible, because really these trees aren't all resolved statically --- sometimes new tree branches can be added at runtime, which this doesn't support --- and adding support for that, while doable, is a huge ugly hack!

I'm not sure how this is going to work though, I didn't get very far with my prototype yet :p

[lgalfaso]

Fully agree, this is an ugly hack. I just was not able to find something that works better without some refactor to $compile

[lord2800]

There's another usecase I can think of off the top of my head: infinitely nested submenus (to the limit of how you render them on the screen).

[caitp]

this is too hard to accomplish in this codebase

[Narretz]

Dupe of #8536

[jeme]

We are still happily using https://github.com/dotJEM/angular-tree allot (yes, i created that)... Optimizations, improvements etc. are more than welcome btw...