Question

有一些流行的递归角度指令Q＆amp; A＆＃39。一个优雅的解决方案是将递归功能抽象为服务并在指令＆＃39;编译＆＃39;阶段：

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

来自docs：

何时不使用组件：

用于依赖DOM操作，添加事件侦听器等的指令，因为编译和链接函数不可用   当你需要高级指令定义选项，如优先级，终端，多元素   当你想要一个由属性或CSS类而不是元素
触发的指令时

换句话说 - 组件不替换指令，它们从它们继承，从而更容易构建简单的指令。您仍然可以使用指令来完成任务。他们不已弃用。

Angular 1.5组件中的递归

2 个答案: