Bootstrap-ui и мобильное меню

Question

Проблема заключается в том, что когда на маленьком мобильном меню устройства/экрана (3 строки) просто ничего не делается при щелчке. Ошибок нет. Я пробовал много вариантов решений, которые я видел, но не могу получить что-нибудь, чтобы работать - решил не падать обратно в JQ

HTML:

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" ng-controller="NavBarCtrl"> 
<div class="container"> 
    <div class="navbar-header"> 
    <button type="button" class="navbar-toggle" ng-init="isCollapsed = false" ng-click="isCollapsed = !isCollapsed"> 
     <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="#"> 
     <img src="/images/logo/logo.png" href="/caption-it/" class="logo img-responsive"> <span class="hidden-xs hidden-sm">Bring your photos to life</span> 
    </a> 
    </div> 
    <div collapse="isCollapsed" class="collapse navbar-collapse navbar-ex1-collapse"> 
    <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#captionIt"><i class="fa fa-home"></i> Home</a></li> 
     <li><a href="/caption-it/facebook-photos"><i class="fa fa-facebook whiteText"></i> <span class="hidden-xs hidden-sm hidden-md">Facebook </span>Photos</a></li> 
     <li class="dropdown"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-list"></i> My Captionise <b class="caret"></b></a> 
     <ul class="dropdown-menu"> 
      <li><a href="#uploadPhotos">Upload Photos</a></li> 
      <li><a href="#myUploadedPhotos">My Uploads</a></li> 
      <li><a href="#myCaptionised">My Captionised Photos</a></li> 
     </ul> 
     </li> 
     <li class="hidden-xs hidden-sm hidden-md hidden-lg"><a href="/caption-it/browser-button">Browser Button</a></li> 
     <li><a href="#" onclick="logOut(); return false"><i class="fa fa-sign-out"></i> Sign Out</a></li> 
    </ul> 
    </div> 
</div> 

Угловой:

var capApp = angular.module('capApp', ['ngRoute','ui.bootstrap','ngCookies']); 

function NavBarCtrl($scope) { 
    $scope.isCollapsed = true; 
} 

Я пробовал с использованием и без использования bootstra.js, но никакой разницы.

Только что (неделя) началось с углового.

Действительно борются с этим, идеи?

Answer 1

Это рабочее решение моей текущей работы.

взглянуть на

<div id="navbar" class="navbar-collapse" ng-class="{'collapse':!isCollapsed}"> 

и

<nav class="navbar navbar-inverse navbar-fixed-top" ng-init="isCollapsed = false"> 

Нет необходимости указывать в контроллере. Выбор за вами, где вы инициализируетесь.

<nav class="navbar navbar-inverse navbar-fixed-top" ng-init="isCollapsed = false"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" ng-click="isCollapsed = !isCollapsed" aria-expanded="false" 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> 
     </button> 
      <a class="navbar-brand" ng-click="getactivemenu('')" ui-sref="home">Site Name</a> 
    </div> 
    <div id="navbar" class="navbar-collapse" ng-class="{'collapse':!isCollapsed}"> 
     <ul class="nav navbar-nav navbar-right"> 
     <li ng-click="isCollapsed = !isCollapsed" ><a ui-sref="enquiries">Menu 1</a></li> 
     <li ng-click="isCollapsed = !isCollapsed" ><a ui-sref="enquiries">Menu 2</a></li> 
     <li ng-click="isCollapsed = !isCollapsed" ><a ui-sref="enquiries">Menu 3</a></li> 
     <li ng-click="isCollapsed = !isCollapsed" ><a ui-sref="enquiries">Menu 4</a></li> 
        </ul> 
    </div><!--/.nav-collapse --> 
    </div> 
</nav>