Адаптивна навігаційна панель зі спадною панеллю 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 "... Я тут маю право?

Тепер я хотів би додати адаптивну поведінку до моєї панелі навігації, як це зроблено в такій скрипті: http://jsfiddle.net/ghtC9/6/

АЛЕ, у наведеному вище рішенні мені щось не подобається. Хлопець включив bootstrap.js!

Отже, який би був правильний кутовий спосіб додати чуйну поведінку до моєї існуючої панелі навігації?

Очевидно, мені потрібно використовувати класи, які відповідають початковій панелі навігації, такі як "nav-kolaps". Але я не знаю як ...

Буду дуже вдячний за вашу допомогу!

Заздалегідь спасибі! Михайло

Ви можете зробити це, скориставшись директивою "згортання": 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.

Оновлення 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 (підказка Lars)

Здається, це працює для мене у простих випадках використання, але на прикладі ви зауважите, що друге випадаюче меню відрізане ... удачі!

Не впевнений, що хтось має таку ж адаптивну проблему, але для мене це було просто просте рішення css.

той самий приклад

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

з

@media screen and (min-width: 768px) {
    .collapse{
        display: block !important;
    }
}

Моє solotion для панелі навігації, що реагує / випадає, із завантажувальною стріпкою 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
}