i displaying dropdown menu when click on item. hiding when click again on item. trying hide dropdown menu if click anywhere on window. here 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 controller:
$scope.showdropdown = function(){ document.getelementbyid("mydropdown").classlist.toggle("show"); }; how close dropdown if click anywhere in page?
if wish close dropdown when click outside select box can use custom directive, listens on window click events. broadcast new event 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 can modify original action include listener dropdown:close event:
$scope.$on('dropdown:close', function (event, data) { $scope.$apply(function() { if($scope.open) { //only close when open $scope.open = !$scope.open; } }); }); 