Angular Recursive - 1.3.x

by Guddu Kumar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js"></script>
<div>
  <div ng-controller="mainCtrl as vm">
    <recurv tree="vm.tree"></recurv>
  
   
  </div>
</div>

JavaScript

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++;
      }, */
    }
  }

});