Angular 递归指令

最近需要写一个指令调用自己，就是指令递归，用ng-include不断的ng-include自己实现了，后来在网上发现了更好的方法，偷过来看一下。
1. html模板

<div>
  <div ng-controller="mainCtrl as vm">
    <recurv tree="vm.tree"></recurv>
    <recurv depth="2" tree="vm.tree"></recurv>
    <recurv depth="3" tree="vm.tree"></recurv>
    <recurv depth="4" tree="vm.tree"></recurv>
  </div>
</div>

2.js文件

angular.element(document).ready(function() {
  angular.module('mainApp', [])
    .controller('mainCtrl', mainCtrl)
    .directive('recurv', recurveDirective);

  angular.bootstrap(document, ['mainApp']);

  function mainCtrl() {
    this.name = "Hello";
    this.tree = [{
      title: '1',
      sub: 'coffee'
    }, {
      title: '2',
      sub: 'milk'
    }, {
      title: '3',
      sub: 'tea',
      children: [{
        title: '3.1',
        sub: 'green tea',
        children: [{
          title: '3.1.1',
          sub: 'green coffee',
          children: [{
            title: '3.1.1.1',
            sub: 'green milk',
            children: [{
              title: '3.1.1.1.1',
              sub: 'green tea tea'
            }]
          }]
        }]
      }]
    }]
  }

  function recurveDirective() {
    var ctr = 0,
      depth = null;
    return {
      template: '<ul><li ng-repeat="t in tree">{{t.sub}}<recurv tree="t.children"></recurv></li></ul>',
      scope: {
        tree: '='
      },
      compile: function(tElement, tAttrs) {
        depth = tAttrs.depth || depth || 1;
        if (ctr == depth) {
          tElement.find('recurv').remove();
          depth = 'end';
        }
        depth == 'end' ? ctr = 0 : ctr++;
      },
    }
  }

});

depth控制深度。

参考： https://jsfiddle.net/cattails27/5j5au76c/
stackoverflow: https://stackoverflow.com/questions/14430655/recursion-in-angular-directives