Dropdown Toggle with AngularJS That Closes on Click Elsewhere

Question

Implementing a simple dropdown directive that uses ng-show to show or hide a menu is trivial in AngularJS. I want to also close the menu if the user clicks elsewhere in the screen after having opened the menu. What is the simplest possible correct way to do this? I have tried using $document.bind and $document.unbind to unbind from the document afterwards, but it does not seem to work as expected, and I can't work ought how it ought to work due to questions of scoping.

I'm aware the ui-bootstrap has a similar directive (dropdownToggle), and I've dug through the source of it, but it looks much more complicated and introduces a dependency on an older version of bootstrap.

Here is an example plunker (that does not close the menu on click elsewhere).

Code:

<!DOCTYPE html>
<html  ng-app="plunker" >
  <head>
    <link data-require="[email protected]" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>
    <script src="example.js"></script>
    <link href="///netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
  </head>

  <body>
    <div  ng-app="dropdown">
      <div menu-status-widget></div>
    </div>
  </body>

</html>

seems to be a problem adding a document clcik handler within ng-click. Use own click handler. can use angular-ui dropdown code as reference — charlietfl
– charlietfl, Commented Nov 9, 2013 at 1:17
@charlietfl the document click handler does work; If I drop an alert in it, I get an alert when I click elsewhere. — Case
– Case, Commented Nov 9, 2013 at 22:44
what i experienced was the document clcik handler seems to fire as soon as you bind it within ng-click. WHen using external events that angular isn't aware of to change scope, you have to change the scope within $.apply which triggers digest . Once you do this using the 'ng-clcik approach, the menu never open...the 2 cancel each other — charlietfl
– charlietfl, Commented Nov 9, 2013 at 22:49
that's why I suggest following pattern the angular-ui folks use and avoid ng-click, — charlietfl
– charlietfl, Commented Nov 9, 2013 at 22:51

hymloth · Accepted Answer · 2014-04-04 10:56:13Z

2

Here's how to handle situation using ng-click. You need to pass $event argument into your ng-click function so can call $event.stopPropagation()

ng-click doesn't seem to react the same way a jQuery handler would. It seems to actually trigger the event after all the code is run, so this causes the $document handler you just added to actually fire.

<div ng-click="buttonAction($event)" >

    scope.buttonAction = function($event) {
              $event.stopPropagation()
                if (!scope.showMenu) {
                    var closeMe = function(scope) { 
                      scope.showMenu = false;
                      $document.unbind('click', this);
                    };
                    $document.bind('click', function(event) {
                    scope.$apply(function(){
                       closeMe(scope)
                    })
                      }); 
                    scope.showMenu = true;
                } else {
                    scope.showMenu = false;
                } 
            };

In my mind it is simpler to forget about ng-click and just use element.bind. Either way you still have to use scope.$apply() to change scope so angular runs a digest

DEMO

edited Apr 4, 2014 at 10:56

hymloth

7,0755 gold badges38 silver badges47 bronze badges

answered Nov 9, 2013 at 23:06

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Case Over a year ago

Perfect! Thanks for the extra explanation.

charlietfl Over a year ago

your previous comment made a light go off...I actually played with this for about 1/2 hour the other day and got frustrated with ng-clcik ...forgot you could pass $event to it

cstuncsik · Accepted Answer · 2015-06-05 15:22:08Z

You can decorate directives.

With this way you don't have to touch the original code and you can keep the original behaviour.

You can put a close button inside the dropdown

HTML

<div class="dropdown-menu keep-dropdown-open-on-click" role="menu">
    <i class="icon-close close-dropdown-on-click"></i>
</div>

JS

angular.module('app').config(uiDropdownMenuDecorate);
uiDropdownMenuDecorate.$inject = ['$provide'];
function uiDropdownMenuDecorate($provide) {

    $provide.decorator('dropdownMenuDirective', uiDropdownMenuDecorator);

    uiDropdownMenuDecorator.$inject = ['$delegate'];

    function uiDropdownMenuDecorator($delegate) {

        var directive = $delegate[0];
        var link = directive.link;

        directive.compile = function () {
            return function (scope, elem, attrs, ctrl) {
                link.apply(this, [scope, elem, attrs, ctrl]);
                elem.click(function (e) {
                    if (elem.hasClass('keep-dropdown-open-on-click') && !angular.element(e.target).hasClass('close-dropdown-on-click')) {
                        e.stopPropagation();
                    }
                });
            };
        };

        return $delegate;
    }
}

Collectives™ on Stack Overflow

Dropdown Toggle with AngularJS That Closes on Click Elsewhere

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related