How to close the dropdown when we click outside the menu in angularjs

Question

I am displaying dropdown menu when I click on an item. It is hiding when I click again on the item. I am trying to hide the dropdown menu if I click anywhere on the window. Here is my code.

<div  ng-click="showDropDown()" class="dropdown">dropDown
                    <div id="myDropdown" class="dropdown-content">
                        <label ng-click="sentToHome()">Home</label>
                        <label  ng-click="sentToContacts()">Contacts</label>
                    </div>
            </div>

Here is my controller:

   $scope.showDropDown = function(){

       document.getElementById("myDropdown").classList.toggle("show"); 
    };

How to close the dropdown if I click anywhere in the page?

Endre Simo · Accepted Answer · 2016-06-06 20:17:43Z

1

If you wish to close the dropdown when you click outside the select box you can use another custom directive, which listens on the window for click events. This will broadcast a new event which you can listen for:

myApp.directive('dropdownListener', function ($window, $rootScope) {
    return {
        restrict: 'A',

        link: function(scope, element, attr) {
          var w = angular.element($window);

          w.bind('click', function(){
            $rootScope.$broadcast('dropdown:close');
          });
        }
    }
});

This means you can modify the original action by include a listener dropdown:close event:

$scope.$on('dropdown:close', function (event, data) {
   $scope.$apply(function() {
      if($scope.open) { //only close when it is open
        $scope.open = !$scope.open;
      }
    });
});

answered Jun 6, 2016 at 20:17

Endre Simo

11.6k3 gold badges44 silver badges52 bronze badges

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

Collectives™ on Stack Overflow

How to close the dropdown when we click outside the menu in angularjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related