Recursion in Angular 1.5 components

Question

There are a couple of popular recursive angular directive Q&A's out there. An elegant solution is to abstracting the recursion functionality into a service And call it at directive 'compile' phase :

Stack Overflow Answer

What is the best approach if I want to use the same concept in the new Angular 1.5 .component() instead of .directive()?

This is a little too broad of a question... you should try it in 1.5 and see what you think. And you have specific problems, ask in SO :). — ajmajmajma, May 04 '16 at 15:43
@ajmajmajma I don't understand 2 things: 1) Why you gave me downvote. 2)If you understood my question. 1.5 .component() does not have 'compile'... I think I'm beeing specific in my question — Pedro Justo, May 04 '16 at 15:51
I did not downvote, however there are many ways to achieve recursion via a directive or component hence this is a broad and possibly opinion based question. You should give it a shot at least and show code if there are problems or questions. — ajmajmajma, May 04 '16 at 15:56
So, How can I compile all the nested contents which are supposed to be the 'same' component? Recursively. I know How I can achieve that with .directive(), I want to know How to apply same concept using 1.5 .component() — Pedro Justo, May 04 '16 at 16:03
Either don't rely on compile - have the template itself recurse based on the passed data or just stick to directive(). I believe component exposes a few other methods you can work with if you are absolutely stuck with using component. — ajmajmajma, May 04 '16 at 16:52

score 11 · Answer 1 · answered Oct 21 '16 at 08:06

Not sure what the confusion is... this is extremely simple to pull off. Below is an example of a recursive component.

angular
.module('app', [])
.component('recursed', {
  template: [
    '<div class="container">',
      '<div>Contains {{$ctrl.depth}} layers</div>',
      '<recursed depth="$ctrl.depth-1" ng-if="$ctrl.depth"></recursed>',
    '</div>'
  ].join(''),
  bindings: {
    depth: '<'
  }
})

.container {
  padding: 5px;
  border: 1px solid #ececec;
  border-radius: 4px;
}

<script src="//unpkg.com/angular@1.5.8/angular.js"></script>
<div ng-app="app">
  <h1>Recursion</h1>
  <recursed depth="5"></recursed>
</div>

score 2 · Answer 2 · edited Jun 20 '20 at 09:12

Components are supposed to be more strict than directives (for simple directives).

They do not expose compile function.

this is from the docs:

When not to use Components:

for directives that rely on DOM manipulation, adding event listeners etc, because the compile and link functions are unavailable when you need advanced directive definition options like priority, terminal, multi-element when you want a directive that is triggered by an attribute or CSS class, rather than an element

In other words - components don't replace directives, they inherit from them making it easier to build simple directives. You can still use directives to the task. They are not deprecated.

Recursion in Angular 1.5 components

2 Answers2