CODEWITHSUNDEEP
javascriptangularjstwitter-bootstrapdrop-down-menu
Fizer Khan
Fizer Khan

Reputation: 92745

Close dropdown menu on click in angular bootstrap ui

I have dropdown menu on navigation bar shown only for mobile devices. When dropdown menu link is clicked, it just move to another path. As you know, this action will not refresh entire page. But even after i click menu under dropdown, it does not go away.

I want to close the dropdown if the menu link is clicked or when route is changed. How do i do it in angularjs bootstrap?

Upvotes: 5

Views: 9354

Answers (3)

Casey Watson
Casey Watson

Reputation: 52682

I found this work-around useful to close the menu.

$scope.$broadcast '$locationChangeSuccess'

Upvotes: 1

Pierre
Pierre

Reputation: 578

I just had this issue too, it seems that we can use the dropdown-toggle directive.

This is no more working, but with angular v1.2.26 angular-ui-bootstrap 0.11.2 Bootstrap v3.2.0 the initial issue seems to be fixed, the drop down menu is closed even if the page is not refreshed.

Upvotes: 0

codef0rmer
codef0rmer

Reputation: 10520

If you are updating the route on clicking any option of the bootstrap dropdown menu then you can just watch for route change event:

Suppose you have below link which opens up a tooltip.

<a class="dropdown-toggle">
  Click me for a dropdown, yo!
</a>

<ul class="dropdown-menu">
  <li ng-repeat="choice in items" class="ng-scope">
    <a class="ng-binding">The first choice!</a>
  </li><li ng-repeat="choice in items" class="ng-scope">
    <a class="ng-binding">And another choice for you.</a>
  </li><li ng-repeat="choice in items" class="ng-scope">
    <a class="ng-binding">but wait! A third!</a>
  </li>
</ul>

$scope.$on('$routeUpdate', function(scope, next, current) {
   $('html').trigger('click');
});

The above will work but there is absolutely no need to grab html element on every route change (as it causes reflow) so better to put it in directive as follows:

<html hide-dropdown>

angular.module('App', []).
  directive('hideDropdown', function() {
    return {
       restrict: 'A',
       link: function(scope, element) {
         scope.$on('$routeUpdate', function(scope, next, current) {
           element.trigger('click');
         });
       } 
    }
  });

Upvotes: 2

Related Questions