У меня есть огурец здесь. Мне нужно получить многоуровневое навигационное меню из вызова веб-службы.
Поскольку в моем навигационном меню может быть бесконечное количество подменю, мне пришлось использовать рекурсивную директиву для построения родительской/дочерней навигационной структуры. Теперь я пытаюсь понять, как превратить его в функциональную структуру dropmenu. Я просматривал angularui-bootstrap, и у них есть Dropdown Toggle, который имеет некоторые базовые функции dropmenu, но, поскольку я использовал рекурсивную директиву, в моей структуре меню уже были прикреплены классы css, сгенерированные angularjs. В выпадающем меню angularjs-bootstrap есть классы css, которые отличаются от моих классов, сгенерированных angularjs... вот!
<ul>
<li ng-repeat="parent in parents" class="ng-scope">
<recursive-list-item on-node-click="onNodeClickFn(node)" parent="parent" class="ng-isolate-scope ng-scope">
<a data-ng-click="onNodeClick({node: parent})" href="javascript:void(0)" class="ng-scope ng-binding">Clothes</a>
<!-- ngIf: parent.children.length > 0 -->
<ul data-ng-if="parent.children.length > 0" class="ng-scope">
<!-- ngRepeat: child in parent.children -->
<li ng-repeat="child in parent.children" class="ng-scope">
<recursive-list-item data-on-node-click="onNodeClickFn(node)" data-parent="child" class="ng-isolate-scope ng-scope">
<a data-ng-click="onNodeClick({node: parent})" href="javascript:void(0)" class="ng-scope ng-binding">Gortex Jackets</a>
<!-- ngIf: parent.children.length > 0 -->
</recursive-list-item>
</li>
<!-- end ngRepeat: child in parent.children -->
...
...
...
</ul>
</recursive-list-item>
</li>
<!-- end ngRepeat: child in parent.children -->
...
...
</ul>
Это был пример html, сгенерированного как конечный результат для моего рекурсивного навигационного меню. При такой настройке все ng-click подменю активны, и они имеют ту же область действия, что и основной контроллер (все прекрасно, за исключением того, что это не похоже на выпадающее меню)
Вот пример структуры dropmenu для angularjs-bootstrap
<li class="dropdown" ng-controller="DropdownCtrl">
<a class="dropdown-toggle">
Click me for a dropdown, yo!
</a>
<ul class="dropdown-menu">
<li ng-repeat="choice in items">
<a>{{choice}}</a>
</li>
</ul>
</li>
У него очень другая структура классов css, чем у меня, поэтому «выпадающий список» angularjs-bootstrap не будет работать с моим.
У кого-нибудь есть предложения для меня? Имейте в виду, что, поскольку я получаю свою навигационную структуру через json через вызов веб-сервиса, мне приходится использовать рекурсивные angularjs для создания структуры родительского/дочернего меню.
Если кто-то запутался в моем html-коде директивы, сгенерированном здесь, я могу показать свой собственный код директивы, но не буду, если его не попросят для краткости. Мой пользовательский код директивы работает только для создания структуры навигации и поддерживает все области директивы, подключенные к области основного контроллера (т.е.: щелчок активен), но он не активен в стиле/прокрутке.
*****ОБНОВЛЕНИЕ******** Я создал почти такую же репликацию плунжера. В моем проекте я получал данные меню навигации из службы angularjs, которая делала бы вызов веб-службы для веб-службы отдыха на моем сервере, но у меня ее здесь нет, поэтому я просто вручную создал json для каждого из моих сервисы, которые выполняют вызовы веб-сервисов REST. Важной частью является рекурсивная директива. Ниже вы найдете ссылку на проект plunker. Кто-нибудь может мне помочь?
Проект Plunker ---------------- ------------------------------------------------------------
************НОВОЕ ОБНОВЛЕНИЕ ******************* Комментарий от Charlietfl о том, что я могу просто иметь несколько классов css в структуре раскрывающегося меню навигации. Я пытаюсь сделать это с помощью angularui-bootstrap. Я следовал инструкциям по добавлению этого в свой проект и создал новый проект Plunker на основе старого проекта plunker, но с дополнительными классами css dropmenu, добавленными в структуру навигации. Вот проект Plunker: Проект Plunker
Навигационные элементы по-прежнему отображаются в DOM, но они не видны. Я посмотрел на css для первого элемента ul, и он такой:
*, *:before, *:after {
-moz-box-sizing: border-box;
}
*, *:before, *:after {
-moz-box-sizing: border-box;
}
.dropdown-menu {
background-clip: padding-box;
background-color: #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
display: none;
float: left;
font-size: 14px;
left: 0;
list-style: none outside none;
margin: 2px 0 0;
min-width: 160px;
padding: 5px 0;
position: absolute;
top: 100%;
z-index: 1000;
}
Он был получен из официального файла bootstrap css. Точно не знаю, почему не видно. Не уверен, что это поможет, но вот css для самого следующего элемента li после ul
*, *:before, *:after {
-moz-box-sizing: border-box;
}
*, *:before, *:after {
-moz-box-sizing: border-box;
}
.dropdown {
position: relative;
}
.dropup, .dropdown {
position: relative;
}
li {
line-height: 20px;
}
*, *:before, *:after {
-moz-box-sizing: border-box;
}
Имейте в виду, что вам нужно перейти на страницу plunker, чтобы увидеть обновленный код, начиная с того момента, когда я добавил теги css, необходимые для angularui-bootstrap. Чтобы увидеть невидимые элементы навигации, вам понадобится что-то вроде Firebug для просмотра DOM.
Вот пример некоторого окончательного вывода html (из DOM) из моего обновления, чтобы попытаться работать с классами angularui-bootstrap css.
...
<li ng-repeat="child in parent.children" class="dropdown ng-scope">
<recursive-list-item data-on-node-click="onNodeClickFn(node)" data-parent="child" class="ng-isolate-scope ng-scope">
<a class="dropdown-toggle ng-scope ng-binding" href="javascript:void(0)">Kids Clothes</a>
...
Я подозреваю, что причина, по которой библиотека angularui-bootstrap не работает, связана с элементом «recursive-list-item..», который является дочерним элементом элемента «li» и родительским элементом для элемента «a». Верна ли эта моя догадка?
