Рекурсивная директива в угловых js

Question

Я создал пользовательскую директиву.

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>
            `                
        }
    })

Элементы меню могут иметь дочерний список, и если дочерний список существует, он должен рекурсивно составлять меню, но рекурсия не происходит.

Answer 1

(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>