Bootstrap Navbar в AngularJs

Question

Я пытаюсь этот учебник, чтобы реализовать Navbar in AngularJS

NavBar код

<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-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"> 
     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav"> 
       <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> 
       <li><a href="#">Link</a></li> 
       <li class="dropdown"> 
       </li> 
      </ul> 
      <ul class="nav navbar-nav navbar-right" ng-controller="LoginController"> 
       <li><a href="#/register">Register</a></li> 
       <li><a href="#/">Login</a></li> 
      </ul> 
     </div> 
    </div> 
</nav> 

Зависимости Список

"dependencies": { 
    "angular": "^1.6.2", 
    "angular-route": "^1.6.2", 
    "angular-cookies": "^1.6.2", 
    "angular-translate": "^2.14.0", 
    "angular-translate-loader-static-files": "^2.14.0", 
    "angular-animate": "^1.6.2", 
    "angular-touch": "^1.6.2", 
    "angular-bootstrap": "^2.5.0", 
    "bootstrap": "^3.3.7" 
} 

Проблема: Не работает на мобильном устройстве. Он показывает, как я запросил просмотр рабочего стола. Я Центровочный увидеть Переключить Navbar

Моя веб-страница Веб-сайт: http://pankajservers.in

ли я что-то отсутствует?

Answer 1

Первых из всего, было бы полезно иметь минимальный рабочий пример. Нужно угадать, правильно ли вы включили угловой, бутстрап и ui-bootstrap.

Я тестировал его с теми же угловыми, ui-bootstrap и bootstrap версиями, которые вы упомянули в своих зависимостях.

Если вы раскомментируете некоторые теги умным способом, ваш код даже работает.

Контейнер div, который обертывает ваши несортированные списки, испортил вещи. При использовании Firebug вы можете видеть, что меню гамбургеров работает, но ваши элементы ui просто не появляются.

<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-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"> 
    <!-- Collect the nav links, forms, and other content for toggling --> 
    <!-- comment out the div block, this messes things up --> 
    <!-- <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">--> 
      <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> 
      <li><a href="#">Link</a></li> 
      <li class="dropdown"> 
      </li> 
     </ul> 

     <ul class="nav navbar-nav navbar-right"> 
    <!-- I excluded the controller for testing purposes --> 
    <!-- ng-controller="LoginController"> --> 
      <li><a href="#/register">Register</a></li> 
      <li><a href="#/">Login</a></li> 
     </ul> 
    <!-- exclude this here --> 
    <!--</div>--> 
</div> 

Answer 2

Возможно, у вас есть неправильный пакет npm для углового-ui-boostrap? Мой навигационный компонент в значительной степени идентичен и работает. Единственное отличие состоит в том, что в вашем package.json вы перечислили «угловую-самозагрузку», где шахта

"dependencies": { 
    "angular": "^1.6.1", 
    "angular-animate": "^1.6.1", 
    "angular-route": "^1.6.1", 
    "angular-ui-bootstrap": "^2.4.0", 
    "express": "^4.14.0", 
    "greenlock-express": "^2.0.8", 
    "webpack": "^1.14.0", 
    "webpack-dev-server": "^1.16.2" 
}, 

Примечание Я использую угловую-UI-самозагрузку вместо углового самозагрузки