Bootstrap NavBar崩溃在默认的angular-fullstack生成的代码中不起作用

Question

I have recently started working on a MEAN stack app and generated some boilerplate code using angular-fullstack. On running grunt serve, a default app actually had collapsing feature of bootstarp library. On reducing the size of window, the navigation collapses and button appears on it. But due to some issue, the clicking functionality is not working. Whenever I click on the button, nothing happens.

div.navbar.navbar-default.navbar-static-top(ng-controller='NavbarCtrl')
  div.container
    div.navbar-header
      button.navbar-toggle(type='button', ng-click='isCollapsed = !isCollapsed')
        span.sr-only Toggle navigation
        span.icon-bar
        span.icon-bar
        span.icon-bar
      a.navbar-brand(href='/') scrub

    div#navbar-main.navbar-collapse.collapse(collapse='isCollapsed')
      ul.nav.navbar-nav
        li(ng-repeat='item in menu', ng-class='{active: isActive(item.link)}')
          a(ng-href='{{item.link}}') {{item.title}}

        li(ng-show='isAdmin()', ng-class='{active: isActive("/admin")}')
          a(href='/admin') Admin

      ul.nav.navbar-nav.navbar-right
        li(ng-hide='isLoggedIn()', ng-class='{active: isActive("/signup")}')
          a(href='/signup') Sign up

        li(ng-hide='isLoggedIn()', ng-class='{active: isActive("/login")}')
          a(href='/login') Login

        li(ng-show='isLoggedIn()')
          p.navbar-text Hello {{ getCurrentUser().name }}

        li(ng-show='isLoggedIn()', ng-class='{active: isActive("/settings")}')
          a(href='/settings')
            span.glyphicon.glyphicon-cog

        li(ng-show='isLoggedIn()', ng-class='{active: isActive("/logout")}')
          a(href='', ng-click='logout()') Logout

controller.js

'use strict';

angular.module('scrubApp')
  .controller('NavbarCtrl', function ($scope, $location, Auth) {
    $scope.menu = [{
      'title': 'Home',
      'link': '/'
    }, {
      'title': 'Solutions',
      'link': '/solutions'      
    }, {
      'title': 'Plans',
      'link': '/plans'
    }, {
      'title': 'About Us',
      'link': '/about'
    }];

    $scope.isCollapsed = true;
    $scope.isLoggedIn = Auth.isLoggedIn;
    $scope.isAdmin = Auth.isAdmin;
    $scope.getCurrentUser = Auth.getCurrentUser;

    $scope.logout = function() {
      Auth.logout();
      $location.path('/login');
    };

    $scope.isActive = function(route) {
      return route === $location.path();
    };
  });

Anyone with any idea what can be possibly wrong ?

Answer 1

You need to have UI-Bootstrap included.

https://github.com/angular-fullstack/generator-angular-fullstack/issues/458

And depending on your version of UI-Bootstrap you might have to modify

collapse='isCollapsed'

to

uib-collapse ='isCollapsed'

Answer 2

A bit late but I have just come across this problem myself. I fixed it by adding the following CSS styles:

.navbar-collapse {
    height: auto !important;
}

.collapsing {
    height: auto !important;
    position: static !important;
}

The problem seems to be that the 'collapsing' class never disappears from the navbar and it also has height: 0px on there too which is preventing it from displaying properly. It works before building the app though (using grunt serve ) so something in the grunt process must break it.

Ps The position: static property isn't necessary, but I also found that the navbar-brand was unclickable unless I added that too.