Recursive directive

by odiseo

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<div ng-app="myApp" ng-controller="Ctrl">
    <script type="text/ng-template" id="tree">
        {{ node.data }}
        <ul ng-if="node.children">
            <li ng-repeat="node in node.children" ng-include="'tree'">           
            </li>
        </ul>
    </script>
    
    <ul>
        <li ng-repeat="node in myData" ng-include="'tree'"></li>
    </ul>    
</div>

JavaScript

angular.module('myApp', []).
directive('tree', function ($parse) {
    var directiveDefinitionObject = {
        restrict: 'E',
        scope: {
            data: '='
        },
        link: function (scope, element, attrs) {
            console.log('Data:');
            console.log(scope.data);
        }
    };
    return directiveDefinitionObject;
});

function Ctrl($scope) {

    $scope.myData = {
        'a': {
            data: 'sodas',
            children: {
                'aa': {
                    data: 'sprite'
                },
                    'ab': {
                    data: 'coke',
                    children: {
                        'aba': {
                            data: 'cherry coke'
                        },
                        'abb':{
                            data: 'vanilla coke'
                        }
                    }
                }
            }
        },
            'b': {
            data: 'doritos',
            children: {
                'ba': {
                    data: 'jalapeño'
                }
            }
        }
    };

}