javascript - Bootstrap NavBar collapse not working in a default angular-fullstack generated code -


i have started working on mean stack app , generated boilerplate code using angular-fullstack. on running grunt serve, default app had collapsing feature of bootstarp library. on reducing size of window, navigation collapses , button appears on it. due issue, clicking functionality not working. whenever click on 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          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 idea can possibly wrong ?

you need have ui-bootstrap included.

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

and depending on version of ui-bootstrap might have modify

collapse='iscollapsed' 

to

uib-collapse ='iscollapsed' 

Comments

Popular posts from this blog

angularjs - ADAL JS Angular- WebAPI add a new role claim to the token -

php - CakePHP HttpSockets send array of paramms -

node.js - Using Node without global install -