Рекурсивные угловые директивы - PullRequest
Новая
       16

Рекурсивные угловые директивы

1 голос
/ 22 марта 2019

Мне нужно использовать рекурсию в угловых директивах.

Следуйте коду с шаблоном без рекурсии.

Это левое меню, которое должно быть создано рекурсивно.

Я не уверен, как поставить рекурсию.

Я пробовал '<leftmenu menuLeft = "itemmenu"> </ leftmenu>', но только изображение профиля появляется несколько раз. 

.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
                };
            }
        } 
    }
}

};

1 Ответ

0 голосов
/ 16 апреля 2019

Немного опоздал на вечеринку, если вы все еще хотите решить эту проблему с помощью рекурсивной директивы, это зависит от того, как выглядит ваша структура данных, но исходя из того, что вы опубликовали, она выглядит следующим образом: 

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

Вы можете разделить их на две директивы:

  • Одна - это родительская директива sidePanel, которая содержит верхний уровень
  • Одна - это директива menuList, которая будет рекурсивно отображать подэлементы
// profile image
// profile name
// etc
<menu-list items="leftMenu.items"></menu-list>

где шаблон списка меню был похож на: 

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

Таким образом, в каждом экземпляре объекта меню (метка, класс, элементы) элементы будут преобразованы вподменю-список.Возможно, вам придется немного поиграть с ним и добавить некоторые другие функции.

...