2

I followed the solution at Angular UI, Bootstrap Navbar Collapse and Javascript and used an ng-click on the list items to make sure the menu collapses when a menu item is clicked (otherwise it just stays open) on mobile devices.

However, I noticed that in the large screen view there is a flicker effect on the menu when the list items are clicked because a menu collapse toggle is triggered.

to fix that, I am using the following function in my controller to ensure that the click even is triggered only on the mobile view:

$scope.toggleCollapse = function(){
    if($window.innerWidth < 768){
       $scope.navbarCollapsed = !$scope.navbarCollapsed
    }
}

But I am pretty sure that it is bad practice to have the screen size used like that inside the controller.

How can I achieve this in a more angularjs best-practice way?

Community
  • 1
  • 1
zarilm
  • 23
  • 2

1 Answers1

0

I know you asked this two years ago, so you've probably figured out a better way by now, but I found your question while I was trying to solve the same problem. I was surprised that this isn't built into the library.

    <div class="collapse navbar-collapse" uib-collapse="isNavCollapsed">
        <ul class="nav navbar-nav">
            <li><a ng-click="home()">Link 1</a></li>
            <li><a ng-click="home()">Link 2</a></li>
        </ul>
    </div>

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('CollapseDemoCtrl', function ($scope) {
  $scope.isNavCollapsed = true;
  $scope.isCollapsed = false;
  $scope.isCollapsedHorizontal = false;
  $scope.home = function() {
    if(!$scope.isNavCollapsed){
      $scope.isNavCollapsed = true;
    }
    //$location.url('/'); you get the idea
  }
});

Here it is in Plunker

Rich Hopkins
  • 1,861
  • 15
  • 29