Javascript 理解AngularJS$编译函数

我试着用n个子菜单和AngularJS构建我的菜单。 这是我的工作范围：

$scope.menu = [
                    {"type": "folder", "name": "TestFolder1", "subfolder": []},
                    {"type": "folder", "name": "TestFolder2", "subfolder": [
                        {"type": "folder", "name": "TestFolder2", "subfolder": [
                            {"type": "folder", "name": "TestFolder2", "subfolder": []},
                            {"type": "folder", "name": "TestFolder2", "subfolder": []}
                        ]},
                        {"type": "folder", "name": "TestFolder2", "subfolder": []}
                    ]},
                    {"type": "file", "name": "testfile"}
            ];

这是我的指令

codeApp.directive('item', ['$compile', function ($compile) {
        return {
            restrict: 'E',
            replace: true,
            scope: {
                item: '='
            },
            template: '<li>'+
            '<a id="item"><i class="fa fa-code-fork fa-fw"></i>{{item.name}}</a>'+
            '</li>',
            link: function($scope, $element) {
                if (angular.isArray($scope.item.subfolder) && $scope.item.subfolder.length > 0) {
                    $element.append('<ul><item ng-repeat="childItem in item.subfolder" item="childItem"></item></ul>');
                    $compile($element.contents())($scope);
                }
            }
        };
    }]);

指令（'item'，['$compile'，函数（$compile）{ 返回{ 限制：'E'， 替换：正确， 范围：{ 项目：'=' }, 模板：“

”+ “{item.name}”+ “

”， 链接：函数（$scope$element）{ if（angular.isArray（$scope.item.subfolder）&&$scope.item.subfolder.length>0）{ $element.append（“

”）； $compile（$element.contents（））（$scope）； } } }; }]); 我的第一句话是：

<item ng-repeat="item in menu" item="item"></item>

将创建菜单，但仅创建第一级和

---

我不确定编译函数是如何工作的。如何实现将行追加到后面？

我认为这里也讨论了类似的问题：

---

答案包括一个plunkr示例，解释得很好。

此解决方案不适合我的问题：/n那么您可以重新表述您的问题吗？我链接到的答案解释了如何使用指令中的递归从javascript对象构建树。