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="myController">
    <navigation menu="menu"></navigation>
</div>

JavaScript

angular.element(document).ready(function(){
    
    angular.module('application', [])
     .directive("navigation", ['$compile',function ($compile) {

        return {
            restrict: 'E',
            replace: true,
            scope: {
                menu: '='
            },
            template: '<ul><li  ng-init="path=item" ng-repeat="item in menu">{{item.Name}}{{path}}<span ng-if="item.Children.length > 0"><navigation menu="item.Children"></navigation></span></li></ul>',
            compile: function (el) {
                var contents = el.contents().remove();
                return function(scope,el){
                    $compile(contents)(scope,function(clone){
                        el.append(clone);
                    });
                };
            }
        };

    }])
    
    .controller('myController', ['$scope','$log',function ($scope,$log) {
        $log.log('In Controller');
        $scope.menu = [{
            Id: 1,
            Name: "Contact",
            Children: [{
                Name: "Testing",
                Children: []
            },{
                Name: "More Testing",
                Children: [{
                    Name: '3rd Level',
                    Children: []
                }]
            }]
        }];
    }]);
    
    angular.bootstrap(document,['application']);
});