Отзывчивая выпадающая панель навигации с начальной загрузкой angular-ui (сделано в правильном угловом виде)

Я создал JSFiddle с раскрывающейся панелью навигации, используя модуль angular-ui-boostrap "ui.bootstrap.dropdownToggle": http://jsfiddle.net/mhu23/2pmz5/

<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
    <div class="container"> <a class="brand" href="#">
                My Responsive NavBar
            </a>

        <ul class="nav">
            <li class="divider-vertical"></li>
            <li class="dropdown"> <a href="#" class="dropdown-toggle">
                        Menu 1 <b class="caret"></b>
                    </a>

                <ul class="dropdown-menu">
                    <li><a href="#/list">Entry 1</a>
                    </li>
                    <li><a href="#/list">Entry 2</a>
                    </li>
                </ul>
            </li>
          ....
        </ul>
    </div>
</div>
</div>

Насколько я понимаю, это правильный угловой способ реализации такого выпадающего меню. «Неправильный» способ, с точки зрения angularjs, состоял бы в том, чтобы включить bootstrap.js и использовать «data-toggle = «dropdown» ... Я прав здесь?

Теперь я хотел бы добавить отзывчивое поведение на панель навигации, как это сделано в следующем Fiddle: http://jsfiddle.net/ghtC9/6/

НО, есть что-то, что мне не нравится в приведенном выше решении. Парень включил bootstrap.js!

Итак, каким будет правильный угловой способ добавить отзывчивое поведение к моей существующей панели навигации?

Мне, очевидно, нужно использовать классы навигационной панели, реагирующие на загрузку, такие как «nav-collapse Collapse navbar-responsive-collapse». Но я не знаю, как...

Я был бы очень признателен за вашу помощь!

Заранее спасибо! Майкл


angularjs angular-ui-bootstrap angular-ui
person Michael Hunziker    schedule 28.04.2013    source источник

Ответы (4)


arrow_upward
57
arrow_downward

Вы можете сделать это с помощью директивы "collapse": http://jsfiddle.net/iscrow/Es4L3/ (проверьте два «Примечания» в HTML).

        <!-- Note: set the initial collapsed state and change it when clicking -->
        <a ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed" class="btn btn-navbar">
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
        </a>
        <a class="brand" href="#">Title</a>
           <!-- Note: use "collapse" here. The original "data-" settings are not needed anymore. -->
           <div collapse="navCollapsed" class="nav-collapse collapse navbar-responsive-collapse">
              <ul class="nav">

То есть вам нужно сохранить свернутое состояние в переменной и изменить свернутое состояние также (просто) изменив значение этой переменной.

В выпуске 0.14 к компонентам добавлен префикс uib-:

https://github.com/angular-ui/bootstrap/wiki/Migration-guide-for-prefixes

Изменить: collapse на uib-collapse.

person xhh    schedule 06.05.2013
comment
Похоже, это не отвечает на вопрос напрямую - он говорит о раскрывающейся кнопке на панели навигации, а вы говорите о сворачивании всей панели навигации. Я что-то пропустил? - person PW Kad; 14.08.2013
comment
Спасибо, чувак, я потратил много времени, пытаясь понять, почему простое складное меню не работает. - person Ignacio Vazquez; 17.05.2016
comment
Лично я не думаю, что uib-collapse — неправильный способ использовать панель навигации. Я бы предпочел использовать uib-dropdown. - person jae.phoenix; 11.12.2017

arrow_upward
123
arrow_downward

Обновление 2015-06

На основе комментария/примера antoinepairet:

Использование атрибута uib-collapse обеспечивает анимацию: http://plnkr.co/edit/omyoOxYnCdWJP8ANmTc6?p=preview

<nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">

        <!-- note the ng-init and ng-click here: -->
        <button type="button" class="navbar-toggle" ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Brand</a>
    </div>

    <div class="collapse navbar-collapse" uib-collapse="navCollapsed">
        <ul class="nav navbar-nav">
        ...
        </ul>
    </div>
</nav>

Древний..

Я вижу, что вопрос сформулирован вокруг BS2, но я подумал, что могу предложить решение для Bootstrap 3 с использованием решения класса ng на основе предложений в выпуск ui.bootstrap 394:

Единственным отличием от официального примера начальной загрузки является добавление ng- атрибутов, отмеченных комментариями ниже:

<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">

    <!-- note the ng-init and ng-click here: -->
    <button type="button" class="navbar-toggle" ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">Brand</a>
  </div>

  <!-- note the ng-class here -->
  <div class="collapse navbar-collapse" ng-class="{'in':!navCollapsed}">

    <ul class="nav navbar-nav">
    ...

Вот обновленный рабочий пример: http://plnkr.co/edit/OlCCnbGlYWeO7Nxwfj5G?p=preview (подсказка Ларс)

Кажется, это работает для меня в простых случаях использования, но вы заметите в примере, что второе раскрывающееся меню обрезано… удачи!

person ptim    schedule 11.10.2013
comment
Вместо ng-класса вы должны использовать «collapse = navCollapsed». потому что в твоей версии нет анимации - person bernhardh; 10.01.2014
comment
Еще одно улучшение: добавьте ng-click=navCollapsed=true в последний div вашего фрагмента, чтобы раскрывающееся меню сворачивалось после выбора элемента. - person Lars Behnke; 12.02.2014
comment
@LarsBehnke, но тогда вы также получаете анимацию, когда панель навигации НЕ свернута, и это выглядит странно. - person BassT; 06.03.2014
comment
Переполнение можно сделать видимым, добавив overflow: visible в тег панели .panel-group в документе bootstrap.css. - person mdewitt; 19.03.2014
comment
По какой-то причине я даже не могу заставить работать метод collap=navCollapse. - person streetlogics; 14.04.2014
comment
@streetlogics Это должно быть navCollapsed, вы пропустили там d - person PSWai; 05.05.2014
comment
Многие из нас используют BS2 для устаревших проектов, и мы не хотим мучиться с преобразованием. Так почему же переход на ответ BS3 получает много голосов? Я что-то пропустил? - person ; 24.05.2014
comment
@SamanthaAtkins - думаю, это просто полезно :) Принятый ответ предназначен для BS2, и я не предлагаю его менять. Когда я добавил ответ, я искал решение BS3 и не нашел его. Я бы не прочь предположить, что соотношение положительных голосов между ответами является неофициальным опросом людей, использующих стек технологий! - person ptim; 25.05.2014
comment
Так что это отличный пример, но я чувствую, что ему не хватает поддержки клавиатуры. - person James; 06.08.2014
comment
Может ли кто-нибудь заставить это анимировать / переходить, как обычное раскрывающееся меню? - person edhedges; 27.08.2014
comment
Я вовремя не отредактировал, но поменял <div class="collapse navbar-collapse" ng-class="{'in':!navCollapsed}"> на <div collapse="navCollapsed"> и переход сработал! - person edhedges; 27.08.2014
comment
Должно быть, я что-то здесь упускаю, но разве это решение не приводит к тому, что настольная версия меню сворачивается и становится недоступной для просмотра, если навигационная панель-переключатель скрыта? Даже с обновлениями из комментариев это все еще так. - person ; 04.07.2015
comment
обновил пример.. @NathanHoad, медиа-запросы отображают навигацию на рабочем столе: @media (min-width: 768px) .navbar-collapse.collapse { display: block!important; height: auto!important; ...} - person ptim; 04.07.2015
comment
Довольно важно для психического здоровья, которое я потерял ради всего;) начиная с angular-ui 0.13 вам нужен ngAnimate, если вы хотите переходы. github.com/angular-ui/bootstrap/issues/3676 - person Kev; 24.09.2015
comment
Если вы используете выпадающее меню в панели навигации, ng-класс также важен для установки класса с именем open в выпадающем меню, как в примере с начальной загрузкой. ‹li class=dropdown ng-class={open: !isDropDownCollapsed}› - person jlguenego; 27.01.2016

arrow_upward
8
arrow_downward

Не уверен, что у кого-то такая же проблема с реакцией, но для меня это было простое решение css.

тот же пример

...  ng-init="isCollapsed = true" ng-click="isCollapsed = !isCollapsed"> ...
...  div collapse="isCollapsed"> ...

с участием

@media screen and (min-width: 768px) {
    .collapse{
        display: block !important;
    }
}
person Dylan    schedule 13.01.2014
comment
Вы должны добавить к селектору .collapse идентификатор навигации, чтобы он не испортил каждое свертывание на странице. - person NiloVelez; 26.07.2014

arrow_upward
1
arrow_downward

Мое решение для адаптивной/выпадающей панели навигации с загрузкой angular-ui (при обновлении до angular 1.5 и ui-bootrap 1.2.1)
index.html

     ...    
    <link rel="stylesheet" href="/css/app.css">
</head>
<body>


<nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <input type="checkbox" id="navbar-toggle-cbox">
            <div class="navbar-header">
                <label for="navbar-toggle-cbox" class="navbar-toggle" 
                       ng-init="navCollapsed = true" 
                       ng-click="navCollapsed = !navCollapsed"  
                       aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </label>
                <a class="navbar-brand" href="#">Project name</a>
                 <div id="navbar" class="collapse navbar-collapse"  ng-class="{'in':!navCollapsed}">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="/view1">Home</a></li>
                        <li><a href="/view2">About</a></li>
                        <li><a href="#">Contact</a></li>
                        <li uib-dropdown>
                            <a href="#" uib-dropdown-toggle>Dropdown <b class="caret"></b></a>
                            <ul uib-dropdown-menu role="menu" aria-labelledby="split-button">
                                <li role="menuitem"><a href="#">Action</a></li>
                                <li role="menuitem"><a href="#">Another action</a></li>                                   
                            </ul>
                        </li>

                    </ul>
                 </div>
            </div>
        </div>
    </nav>

app.css

/* show the collapse when navbar toggle is checked */
#navbar-toggle-cbox:checked ~ .collapse {
    display: block;
}

/* the checkbox used only internally; don't display it */
#navbar-toggle-cbox {
  display:none
}
person nguyên    schedule 02.03.2016