angularjs - Angular 1.5 组件中的递归

Question

有几个流行的递归角度指令问答。一个优雅的解决方案是将递归功能抽象到服务中并在指令“编译”阶段调用它：

堆栈溢出答案

如果我想在新的 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 类触发的指令时, 而不是一个元素

换句话说 - 组件不会替换指令，它们从它们继承，从而更容易构建简单的指令。您仍然可以对任务使用指令。它们没有被弃用。