ngView исчезает при нажатии раскрывающегося списка панели навигации

Я пытаюсь реализовать страницу, содержащую панель навигации (http://getbootstrap.com/components/ см. панель навигации ), а содержимое страницы вставляется из частичного html через ngView. Однако при нажатии раскрывающегося списка вся часть ngView исчезает.

Вот как я определил ngView:

<div ng-controller="MainCtrl">
    <div ng-view></div>
</div>

Вот плункер: http://plnkr.co/edit/l8GVWUiq2HRL3lXhu9xd?p=preview (Пожалуйста, откройте, нажав «Запустить предварительный просмотр в отдельном окне», чтобы увидеть панель навигации) Нажмите кнопку панели навигации «Раскрывающийся список».

Если я отлаживаю экран, я вижу, что ngView вообще не отображается, все, что я вижу, это:

<!-- ngView:  -->

Любые идеи?


angularjs angular-ui-bootstrap angular-ui ngroute ng-view
person aol    schedule 20.08.2015    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Вы должны добавить это к тегу ul:

ng-click="$event.preventDefault();"
person quanfoo    schedule 20.08.2015
comment
Следите за этим: хотя щелчок меню панели навигации теперь работает, щелчок пункта меню не выполняет никакой маршрутизации. См. обновленный plunkr: plnkr.co/edit/l8GVWUiq2HRL3lXhu9xd?p=preview - person aol; 20.08.2015
comment
По сути, вы не хотите запрещать маршрутизацию для всех ссылок, поэтому просто правильно используйте $preventDefault. Я добавил другое представление для маршрута действия по адресу здесь. Вот некоторые ресурсы, которые могут быть полезны для вас: официальный документ, пример phonecat - person quanfoo; 20.08.2015
comment
Ясно - я воспринял твой совет буквально и вложил его в ‹ul›. Его следует добавить в ‹a› под ‹li class=dropdown›. Еще раз спасибо! - person aol; 20.08.2015
comment
Это плохая практика — добавлять $preventDefault для каждого li (это просто быстрое исправление). Вместо этого вы можете правильно обрабатывать представления, используя маршрутизатор :) - person quanfoo; 20.08.2015
comment
я не делаю навигационную панель или что-то в этом роде. Но у меня также есть ng-view div, компилируемый в ‹!-- ngView: --›, и я не могу найти никакой документации по этому поводу. Вы когда-нибудь получали такой ответ? - person Kyle Calica-St; 10.04.2016
comment
Этот комментарий должен быть сгенерирован фреймворком. Если ваши маршруты не работают должным образом, проверьте, правильно ли настроен $routeProvider. Это может помочь: docs.angularjs.org/api/ngRoute/directive/ngView - person quanfoo; 11.04.2016
comment
Ага! Вы были правы, ‹!-- ngView --› отображается только тогда, когда нет представления для загрузки. Выяснил, что я снова забыл () в конце моей самовызывающейся функции. - person Kyle Calica-St; 12.04.2016

arrow_upward
2
arrow_downward

Просто удалите атрибут href="#" из элемента <a> в раскрывающейся кнопке ссылки, и он перестанет мешать вашей маршрутизации.

<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
person Gabriel Marcos Jarczun    schedule 23.06.2016
comment
Это отлично работает на html5 stackoverflow.com/questions/5292343/. - person Brian; 18.11.2016