Hide div when clicked elsewhere in ionic app

1

How we can add a feature to hide a particular div when we click outside this div (i.e. anywhere in the app screen). I am implementing an auto completer search list & want to hide my search results when clicked outside this list. The attached image shows what currently I am trying to implement. When I search something the results are shown in the div with white background. Now I want to hide this div when I click elsewhere in the app.

image
image.png471×713 13.5 KB

2

Here is the Example implemented for angular application. But it is not generic as it requires to detect the click event on other div. We require something like focus/blur event for div.

3

add a directive to your div -> this directive adds click listener to the body -> if you clicked somewhere else outside the div -> close it (via a flag) and animate it with ng-hide and ng-show.

1 Like
4

Thanks bengtle, after your suggestion I tried to implement this & it worked like a charm. Posting the code snippet to help others.

JS

app.directive('detectOutsideClick', function($document){
    return {
        restrict: 'A',
        link: function(scope, elem, attr, ctrl) {
          elem.bind('click', function(e) {
            // this part keeps it from firing the click on the document.
            e.stopPropagation();
          });
          $document.bind('click', function() {
            // magic here.
              scope[attr.perform]();
            scope.$apply(attr.detectOutsideClick);
          })
        }
      }
    });

HTML

<div detect-outside-click perform="actionName">
  your stuff goes here..........
</div>

Here actionName is a function in your controller, which will implement the logic to hide the div, or infact you can do anything inside this function after detecting the outside click.

1 Like
5

hi @rahulbho and @bengtler .

I have the same problem related to this topic.
Here’s my code : http://codepen.io/harked/pen/WvMgXg

I want to create “Food Menu” mobile app that will show it’s description when we click the ‘Menu card’. My question is how to hide the opened description when we click anywhere else on the page?

6

you can set global click listener (in the example on the body tag).
But then your other click listeners want work, because the click-event bubbles from your clicked element through its parents. So the body clicklistener will reset all your previously made changes.

For that you can pass the $event-object to your other click listeners and call $event.stopPropagation(), which stops the bubbling.

1 Like
7

It works !
Great thanks (again), @bengtler!