CODEWITHSUNDEEP
angularjstwitter-bootstrapbootstrap-ui
Ted Scheckler
Ted Scheckler

Reputation: 1521

AngularJS with UI Bootstrap - Automatically collapse menu when nav item is clicked

In this example: https://plnkr.co/edit/O9fbLcTV7QPvqB3FpiAA?p=preview

When you click the hamburger menu icon and select a nav item, it leaves the menu open until you click the hamburger icon again. Is there a good way to automatically collapse when a menu item is selected?

I tried: 

<li><a href="#" ng-click="isNavCollapsed = !isNavCollapsed;">Link 1</a></li>

Which works, but will trigger the nav menu collapse animation when not in mobile mode (on a wider screen).

Upvotes: 0

Views: 1067

Answers (2)

Pop-A-Stash
Pop-A-Stash

Reputation: 6652

You can add an event listener using plain JS, where you can check that the width of the window matches your mobile breakpoint. Just make sure you wrap the actual change to the scope variable in a $apply function otherwise AngularJS will not know about it:

https://plnkr.co/edit/ZzbXZ3lFxqX6Tlra46W5?p=preview

angular.module('ui.bootstrap.demo').controller('CollapseDemoCtrl', function ($scope) {
  $scope.isNavCollapsed = true;
  $scope.isCollapsed = false;
  $scope.isCollapsedHorizontal = false;


  document.addEventListener('click', collapseMenu, false);

  function collapseMenu(event) {
    if(event.target.matches('.nav.navbar-nav li a')  && window.innerWidth < 768) {
      $scope.$apply(function() {
        $scope.isNavCollapsed = true;
      });
    }
  }

  // prevent memory leaks by removing listener when scope is destroyed
  $scope.$on("$destroy", function() {
    document.removeEventListener('click', collapseMenu, false);
  });

});

Note that this will require you to keep your CSS and JS in sync with regards to the breakpoint value

Upvotes: 0

Ted Scheckler
Ted Scheckler

Reputation: 1521

I solved it by adding a flag 'hamburger_open' that triggers true on expanding() and false on collapsing().

<div class="collapse navbar-collapse" uib-collapse="isNavCollapsed" expanding="hamburger_open=true" collapsing="hamburger_open=false">

... and hamburger_collapse function that checks if hamburger_open is true:

<li><a href="#" ng-click="hamburger_collapse()">Link 1</a></li>

  ...
  $scope.hamburger_collapse = function() {
    if($scope.hamburger_open) {
      $scope.isNavCollapsed = !$scope.isNavCollapsed;
    }
  }
  ...

https://plnkr.co/edit/IFIL8lgjK0oGDqZkLK5F?p=preview

Seems like an odd thing to have to do considering every modern mobile menu automatically collapses when a menu item is chosen.

Upvotes: 0

Related Questions