javascript - Angular UI & Bootstrap: Collapse Mobile Navbar on Link Click -
i have functioning bootstrap navbar through use of ui.bootstrap of angular-ui. mobile navbar, want navbar collapse when link clicked. toggle button functions expected, can't ng-click="iscollapsed = !iscollapsed" work on nav links.
<div class="navbar navbar-default navbar-fixed-top" ng-controller="navbarctrl"> <div class="container"> <div class="navbar-header"> <button class="navbar-toggle" type="button" 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 href="/" class="navbar-brand">app</a> </div> <div collapse="iscollapsed" class="navbar-collapse collapse" id="navbar-main"> <ul class="nav navbar-nav"> <li ng-repeat="item in menu" ng-class="{active: isactive(item.link)}"> <a ng-href="{{item.link}}" ng-click="iscollapsed = !iscollapsed">{{item.title}}</a> </li> </ul> </div> </div> </div>
in controller, applicable code is:
$scope.iscollapsed = true;
i had same issue. not sure if best solution added in main controller:
$rootscope.$on('$statechangestart', function(event, tostate){ $scope.navbarcollapse = true; });
it doesn't ask, because it's not triggering collapse on click event. trigger collapse on each state change purpose same.
Comments
Post a Comment