Recursive menu directive

Question

I'm trying to make a recursive menu with angularJS, but I keep getting the error: Maximum call stack size

My directives:

angular.module("application").directive("navigation", [function () { return { restrict : 'E', replace : true, scope : { menu : '=' }, template : '<ul><navigation-item ng-repeat="item in menu" submenu="item"></navigation-item></ul>', link : function ($scope, elem, attrs) {} } } ]); angular.module("application").directive("navigationItem", [function () { return { restrict : 'E', replace : true, scope : { submenu : '=' }, template : '<li>{{ submenu }}<navigation menu="submenu.Children"></navigation></li>', link : function ($scope, elem, attrs) {} } } ]); 

My controller:

 app.controller('myController', ['$scope', function (ng) { ng.menu = [{ Id : 1, Nome : "Contact", Children : [{ Nome : "Testing", Children : [] }] }]; } ]); 

Here is how I use it:

<navigation menu="menu"></navigation>

http://jsfiddle.net/7sq3n/

Answer 1

There are two things here:

• You do not need 2 directives
• I suspected that you would need to use the directive compilation function to make it work, since you are using this directive inside your own template, you will also need to use the injective $compile

I used the ngIf directive in the template, you do not need me to just tell you and warn you that you need to use AngularJS 1.1.5+ to use this directive.

Here JSFiddle I got the job: http://jsfiddle.net/mikeeconroy/7sq3n/6/

 .directive("navigation", ['$log','$compile',function ($log,$compile) { return { restrict: 'E', replace: true, scope: { menu: '=' }, template: '<ul><li ng-repeat="item in menu">{{item.Name}}<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); }); }; } }; 

I engaged in this with a little help from here: Recursion in Angular directives

UPDATE : http://jsfiddle.net/mikeeconroy/Z6sG9/2/ Solves the problem with multiple root elements

Answer 2

A dynamic, recursive navigation menu (navbar) using dynamic data using Angular and Bootstrap.

http://plnkr.co/edit/YqGcmcH6VQqr3rxOswnb

  <div ng-app="headerMenuApp"> <div ng-controller="headerMenuListController"> <nav id="headerNavigationMenuContainer" class="navbar navbar-default"> <div class="container-fluid"> <!-- Non-collapsing right-side menu items --> <div class="navbar-header pull-right"> <ul class="nav pull-left navbar-nav text-nowrap"> <li class="dropdown pull-right"> <a href="#" class="dropdown-toggle navbar-icon" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-question-circle"></i> &nbsp; Help <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Live Chat</a></li> <li><a href="#">Help Topics</a></li> </ul> </li> </ul> </div> <!-- Collapsing left-side menu items --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed pull-left" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar" ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Logo</a> </div> <div id="navbar" class="collapse navbar-collapse" ng-class="!navCollapsed && 'in'"> <ul class="nav navbar-nav text-nowrap"> <leaf ng-repeat='leaf in tree' leaf='leaf'></leaf> </ul> </div> </div> </nav> </div> </div>