Recursive directive in angular js

Question

I created a custom directive.

angular.module('menu',[])
    .directive('Menu',function(){
        return{
            restrict:'E',
            replace:'true',
            scope:{
                menuList:'=',
                id:'@',
                parentId:'@'
            },
            controller:function($scope){       
            },
            template: `
                <div ng-repeat="menuItem in menuList">
                    <a>{{menuItem.longDescription}}</a>
                    <div ng-if="menuItem.child.size() > 0 ">
                      <menu menu-list="menuItem.child" 
                            id="menuItem.optionGroupId"
                            parent-id="menuItem.parentOptionGroupId">
                      </menu>
                    </div>
                </div>
            `                
        }
    })

Menu items can have child list and if child list exist it should make menu recursively, but recursion is not happening.

can you try to change the directive name from "Menu" to "some other name" ? Hope it will work. — Mohit Prakash, Oct 14 '19 at 09:28
This might help you. check out https://stackoverflow.com/questions/14430655/recursion-in-angular-directives. — Allabakash, Oct 14 '19 at 10:02

score 1 · Accepted Answer · answered Oct 14 '19 at 10:23

(function() {
  angular.module("menuTest", [])
    .controller('testCtrl', function($scope) {
      $scope.menu = [{
          id: 1,
          children: [{
            id: 3
          }]
        },
        {
          id: 2,
          children: [{
              id: 4
            },
            {
              id: 5
            }
          ]
        }
      ];
    })
    .directive("menu", function() {
      return {
        restrict: "E",
        replace: true,
        scope: {
          menuList: '='
        },
        template: '<div ng-repeat="menuItem in menuList">{{menuItem.id}}<div ng-if="menuItem.children && menuItem.children.length>0" ><menu menu-list="menuItem.children"></menu></div><div>'
      }
    })
})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<div ng-app="menuTest" ng-controller="testCtrl">
  <menu menu-list="menu"></menu>
</div>

Can you please explain what am I doing wrong? I see no difference between your code and my code. only difference is that I am using Angular 1.3x — A.Mujeeb, Oct 14 '19 at 10:29

Recursive directive in angular js

1 Answers1