Angular 1.5组件中的递归

Question

有一些流行的递归角度指令Q&A在那里.一个优雅的解决方案是将递归功能抽象为服务并在指令'compile'阶段调用它:

堆栈溢出答案

如果我想在新的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>