Collapse ui bootsrap navbar in angularjs on clicking menu list item

Question

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?

Rich Hopkins · Accepted Answer · 2017-06-09 02:24:49Z

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

Collectives™ on Stack Overflow

Collapse ui bootsrap navbar in angularjs on clicking menu list item

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related