Styjun

I need to use recursion in angular directives.

Follow the code with the template without recursion.

It is a left menu that must be created recursively.

I'm not sure how to put the recursion.

I tried '<leftmenu menuLeft = "itemmenu"> </ leftmenu>', but so only the profile image appears several times.

.directive('leftmenu', ['$compile', function ($compile) 
return 
retrict: 'E',
scope: menuLeft: '=?' ,
template: '<div class="user-panel">' +
 '<div class= "pull-left image">' +
 '<img src=" menuLeft.profileImgSrc " class="img-circle" alt=" menuLeft.profileName " />' + 
 '</div>' + 
 '<div class="pull-left info">' + 
 '<p> menuLeft.profileName </p>' +
 '</div>' +
 '</div>' + 
 '<ul class="sidebar-menu">' +
 '<li class="header"> menuLeft.header </li>' +
 '<li class="treeview" ng-repeat="itemmenu in menuLeft.itens">' +
 '<a href=" itemmenu.actionLink ">' +
 '<i class=" itemmenu.visualClass "></i> <span> itemmenu.label </span>' +
 '<span class="pull-right-container" ng-show=" itemmenu.subItems.length > 0 ">' +
 '<i class="fa fa-angle-left pull-right"></i>' +
 '</span>' +
 '</a>' +
 '<ul class="treeview-menu">' +
 '<li ng-repeat="subItem in itemmenu.subItems">' +
 '<a ng-if="subItem.openInNewWindow" target="_blank" href=" subItem.actionLink ">' +
 '<i subItem.class ></i> subItem.label ' +
 '</a>' +
 '<a ng-if="!subItem.openInNewWindow" target="_self" href=" subItem.actionLink ">' +
 '<i subItem.class ></i> subItem.label ' +
 '</a>' +
 '</li>' +
 '</ul>' +
 '</li>' +
 '</ul>',

compile: function (element) 

,

controller: function ($location, $http, $scope) 

 $scope.menuLeft = 
 "profileName": "",
 "profileImgSrc": response.data.msgSaida[0].profileImgSrc,
 "header": "",
 "itens": response.data.msgSaida[0].itens,
 "token": token
 ;
 
 
 
}

};

A little late to the party, if you're still looking to resolve this with a recursive directive, it depends what your data structure looks like, but assuming from what you've posted it looks like this:

 "profileName": "",
 ...
 "items": [
 "label": "title1",
 "class": "class1",
 "items: [...]
 ,
 "label": "title1",
 "class": "class1",
 "items: [...]
 ]

You can split them into two directives:

• One is the parent sidePanel directive that contains the top level


• One is the menuList directive that will recursively display sub items

// profile image
// profile name
// etc
<menu-list items="leftMenu.items"></menu-list>

where menu list template was like:

<ul>
 <li ng-repeat="item in items">
 <span class="item.class">item.label</span>
 <menu-list ng-if="item.items" items="item.items"></menu-list>
 </li>
</ul>

So in each instance of a menu object (label,class,items) the items will be converted into a sub menu-list. You might need to play with it a little and add in some other features.