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 :
What is the best approach if I want to use the same concept in the new Angular 1.5 .component() instead of .directive()?
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/[email protected]/angular.js"></script>
<div ng-app="app">
<h1>Recursion</h1>
<recursed depth="5"></recursed>
</div>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.
