Close dropdown menus on click on other menu item or body (Angularjs)

Question

Can anyone help me? I have various dropdown menus on my application and I'am trying to close them on click on other menu items and on click on body. I'am using angular.js without jQuery.

html

<div ng-controller="SomeController as controller">
<div class="select-box">
    <div class="select-box-field" ng-click="dropdown = !dropdown;">
        <span>Menu Name</span>
    </div>
    <div class="select-box-field-dropdown" ng-class="{ 'is-active':dropdown }">
        <span>Dropdown menu Item 1</span>
        <span>Dropdown menu Item 2</span>
    </div>
</div>

Controller

(function() {

  var app = angular.module('application');

  app.controller('SomeController', someCtrl);

  function someCtrl () { 

    var vm = this;
    vm.dropdown = false;

  };
})();

Here is the fiddle http://jsfiddle.net/aafvxmbn/2/

This is probably the best solution I found: http://stackoverflow.com/questions/21068955/how-can-i-set-a-variable-when-clicking-anywhere-in-the-browser-window/21069377#21069377 — user3632106, Feb 09 '15 at 12:11
The best solution would be to use the ui.bootstrap dropdown http://angular-ui.github.io/bootstrap/#/dropdown — fauverism, Jun 11 '15 at 19:17

Nisham Mahsin · Accepted Answer · 2015-01-27T14:33:02.900

2

Update

You can call the same unction from the container and call $event.stopPropagation()

See this updated fiiddle You can set dropdown value in ng-click

<div class="select-box-field" ng-click="change(1)">

or

<div class="select-box-field" ng-click="change(1)">

and in controller the function change()

.controller("Ctrl1", function($scope, $element)
  {
      $scope.dropdown=0;
      $scope.change = function(a) {

            $scope.dropdown=a;
      }

  })

see this fiddle for full working demo

edited Jan 27 '15 at 14:33

answered Jan 27 '15 at 10:24

Nisham Mahsin

1,399
5
19
43

This works for the dropdown toggle only, but a click on body will not close the dropdown. By the way. – user3632106 Jan 27 '15 at 10:43

score 0 · Answer 2 · edited May 23 '17 at 12:08

Create a directive for your dropdown which also handles the click event. In your case it will just set dropdown = false;. For this, it will bind two event handlers: one on your html and another on the elem itself. Something like this:

myApp.directive('clickOutside', function() {
    return function(scope, elem) {
        var x = document.getElementsByTagName("BODY")[0];
        x.addEventListener('click', function() {
            dropdown = false;
            scope.$apply();            
        });
        elem.addEventListener('click', function(e) {
            e.stopPropagation();
        });
    }
});

It may not work like this, you need to add the directive to your markup and pass dropdown to the directive. Make a fiddle to make it easier to help you.

For more info about detecting outside clicks read How do I detect a click outside an element?

Please see the following fiddle:

I've made a fiddle, but it does not work. Do you have an idea? http://jsfiddle.net/aafvxmbn/6/ — user3632106, Jan 27 '15 at 09:41
try to tweak this fiddle a little bit by your needs: http://jsfiddle.net/HB7LU/10442/ — DonJuwe, Jan 27 '15 at 10:00

Close dropdown menus on click on other menu item or body (Angularjs)

2 Answers2