Angular Пользовательский интерфейс, Bootstrap Navbar Collapse и Javascript

У меня проблемы с UI-Router по-разному. Я не понимаю, как он взаимодействует с другими средами.

А именно, я пытаюсь внедрить модуль сбрасывания модуля Bootstrap 3, как показано ниже:

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <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="#">Project name test</a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</div>

Это прямо с сайта Bootstrap, и он отлично работает, когда он находится на собственной странице .html.

Проблема заключается в том, когда я вставляю его в представление UI-Router. Действие сжимания больше не работает - я предполагаю, потому что функция "target-target" каким-то образом не может найти свою цель.

Как использовать Bootstrap 3 с Angular UI? Пакет Angular UI Bootstrap не имеет навигационного модуля.

Ответ ниже хорош. Вот ссылка URL Twitter Bootstrap Navbar с AngularJS - Collapse Not Functioning.

Ответ 1

Вы должны заменить исходные js-свойства bootstrap на директивы ui-bootstrap (обратите внимание на ng-click и collapse):

<nav class="navbar navbar-default" role="navigation">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" ng-click="navbarCollapsed = !navbarCollapsed">
        <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="#">
        <!-- your branding here -->
      </a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" collapse="navbarCollapsed">
      <!-- your normal collapsable content here -->
    </div>
</nav>

Задайте начальное значение в контроллере:

$scope.navbarCollapsed = true;

Edit:

Новые версии ui-bootstrap префикс для всех компонентов. Соответственно отрегулируйте свой код, например. collapse → uib-collapse.

Ответ 2

Моя особая проблема вращалась вокруг области. Я использую ng-repeat для прокрутки моих пунктов меню, поэтому navbarCollapsed недоступен в области ng-repeat.

Резолюция заключалась в доступе к переменным родительской области. Просто:

ng-click="$parent.navbarCollapsed = !$parent.navbarCollapsed"

Надеюсь, это поможет любому, кто имеет ту же проблему.