Рекурсия в компонентах Angular 1.5

Question

Существует несколько популярных рекурсивных угловых директив Q&A. Элегантное решение состоит в том, чтобы абстрагировать функциональность рекурсии в службу и вызывать ее на этапе компиляции директивы:

Ответ переполнения стека

Каков наилучший подход, если я хочу использовать ту же концепцию в новом Angular 1.5 .component() вместо.directive()?

Answer 1

Не уверен, что путаница... это очень просто осуществить. Ниже приведен пример рекурсивного компонента.

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>

Answer 2

Компоненты должны быть более строгими, чем директивы (для простых директив).

Они не выставляют compile функция.

это из документов:

Когда не использовать компоненты:

для директив, которые полагаются на манипулирование DOM, добавление прослушивателей событий и т. д., потому что функции компиляции и ссылки недоступны, когда вам нужны расширенные опции определения директив, такие как приоритет, терминал, многоэлемент, когда вы хотите директиву, которая запускается атрибутом или классом CSS, а не элемент

Другими словами - компоненты не заменяют директивы, они наследуются от них, что упрощает создание простых директив. Вы все еще можете использовать директивы для этой задачи. Они не устарели.