CODEWITHSUNDEEP
htmlcssangularjstwitter-bootstrap
Arun Kumar M
Arun Kumar M

Reputation: 1601

When I use ngRouter, navbar is not collapsing

When I use ngRouter, navbar is not collapsing after selecting a link in small devices

angilarjs:

var app = angular.module('MyTemplate',['ngRoute','ui.bootstrap']); 
app.controller("templateCtrl",function($scope){ 
  $scope.navbarCollapsed = true;
});

app.config(['$routeProvider', function($routeProvider) {
  $routeProvider
    .when('/Page1', {
      templateUrl: 'Page1.html',
      controller: 'Page1Ctrl'
    })
    .when('/Page2', {
      templateUrl: 'Page2.html',
      controller: 'Page2Ctrl'
    })
    .otherwise({
      redirectTo: '/Page1'      
    });
}]);

HTML:

<div class="navbar-header">
  <button type="button" class="navbar-toggle" ng-click="navbarCollapsed = !navbarCollapsed"> 
    <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="">Navigation bar</a>
</div>

<!-- nav links for toggling -->
<div class="collapse navbar-collapse" collapse="navbarCollapsed">
  <ul class="nav navbar-nav nav_width">
    <li><a href="#dashboardPage">Page1</a></li>
    <li><a href="#positionsPage">Page2</a></li>
  </ul>
</div>

Please help to fix this issue. Thank you...

Upvotes: 0

Views: 76

Answers (1)

Alfonso Presa
Alfonso Presa

Reputation: 1034

Change the code like this:

var app = angular.module('MyTemplate',['ngRoute','ui.bootstrap']); 
app.controller("templateCtrl",function($scope){ 
    $scope.navbarCollapsed = true;
    $scope.collapseNavbar = function () {
        $scope.navbarCollapsed = true;
    };
});

And the html

<div class="collapse navbar-collapse" collapse="navbarCollapsed">

<ul class="nav navbar-nav nav_width">
<li><a href="#dashboardPage" ng-click="collapseNavbar()">Page1</a></li>
<li><a href="#positionsPage" ng-click="collapseNavbar()">Page2</a></li>
</ul>

</div>

It's adding a function to the scope to force the collapse property to true

Upvotes: 1

Related Questions