Understanding the AngularJS $compile function

Question

I try to build my menue with n sub menues with AngularJS. this is my scope:

$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"}
            ];

this is my directive

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);
                }
            }
        };
    }]);

and my first line is this :

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

The menu is created, but only the first level and I'm not sure how the compile function works. How can I achieve that the line is appended after the ?

Community · Accepted Answer · 2017-05-23 12:23:21Z

1

I think a similar problem has been discussed here: https://stackoverflow.com/a/18609594/4360457

The answer includes a plunkr example and is explained very well.

edited May 23, 2017 at 12:23

CommunityBot

11 silver badge

answered Jan 23, 2015 at 13:33

Bricktop

1,54914 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

JFL Over a year ago

This Solution doesn't fit with my problem :/

Bricktop Over a year ago

Could you rephrase your question then? The answer I linked to explains how to build a tree from a javascript object using recursion within directives.

Collectives™ on Stack Overflow

Understanding the AngularJS $compile function

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related