Angular recursion

by andyjmeyers

HTML

<div>
    <div  ng-controller="TreeController">
        <ul>
            <flatten-tree root='treeFamily'><div>{{node}}</div></flatten-tree>
        </ul>
        
    </div>
</div>

JavaScript

angular.module('demo', []).controller("TreeController", function ($scope) {
    $scope.treeFamily = {
       left: {
            left: {
                left: "a",
                right: "b"
            },
            right: "c"
        },
        right: {
            left: {
                left: {
                    left: "d",
                    right: "e"
                },
                right: {
                    left: "f",
                    right: "g"
                }
            },
            right: "h"

        }
     
    };

}).directive('flattenTree', function () {
    return {
        restrict: 'E',
        template: "<li ng-repeat='node in tree' ng-transclude></li>",
        transclude: true,
        scope: {
            root: '='
        },
        link: function (scope) {
            scope.tree = [];
            var index = 0;
            var queue = [];
            queue.push(scope.root);
            while (queue.length != 0) {
                var node = queue.shift();
                if (node['left']) {
                    queue.unshift( node.right, node.left);
                } else {
                    scope.tree.push(node);
                }
            }
    
        }
    };
});