How to hide a menu using $document.on in angular js

Question

I have a variable-isTelephoneMenuOpen that makes my menu Open. Now on click on anywhere else in window I want to make it disappear. I tried this code but Its not working.Please help

  $document.on('click', function (event) {
      if (this.isTelephoneMenuOpen = true) {
           console.log("close menu");
           this.isTelephoneMenuOpen = false;
           // return $document.off('click', event);
      }
});

This is not how we use AngularJS. Check ng-show, ng-if and ng-click — Weedoze
– Weedoze, Commented Jan 10, 2017 at 9:44
Also notice that your condition is ASSIGNING the value, not comparing it. It will ALWAYS evaluate to true — casraf
– casraf, Commented Jan 10, 2017 at 9:49
@casraf:Thanks . $document.on('click', function (event) { if (self.isTelephoneMenuOpen == true) { console.log("close menu"); self.isTelephoneMenuOpen = false; console.log("self val --->"+ self.isTelephoneMenuOpen); console.log("this val --->"+ this.isTelephoneMenuOpen); //return $document.off('click', event); } }); I corrected the code.Its working ...But when I hover to the Menu item list disappears. — pourushsingh gaur
– pourushsingh gaur, Commented Jan 10, 2017 at 10:04
@Weedoze:Thanks for suggestion.But how to make that variable false when a user click anywhere else in the window and without using directive ? — pourushsingh gaur
– pourushsingh gaur, Commented Jan 10, 2017 at 10:21

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

The this keyword inside event handlers binds to the element emitting the event, not the this context of the parent function. Explicitly bind the parent this context to a variable.

  var $ctrl = this;

  $document.on('click', menuClickHandler);

  this.$onDestroy = function() {
      $document.off('click', menuClickHandler);
  };

  function menuClickHandler(event) {
      if ($ctrl.isTelephoneMenuOpen) {
           console.log("close menu");
           $ctrl.isTelephoneMenuOpen = false;
           $rootScope.$apply();
      }
  }

Click events come from outside the AngularJS framework. Use $apply to initiate an AngularJS digest cycle to update the DOM.

-- AngularJS Developer Guide (v1.1) - Concepts - Runtime.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jan 10, 2017 at 11:06

georgeawg

49k13 gold badges78 silver badges98 bronze badges

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

3 Comments

petkov.np Over a year ago

Very nice explanation, one remark though: digesting the scope in which the binding is to be re-evaluated is much better (faster) then forcing a complete digest on all elements using $rootScope.$apply().

georgeawg Over a year ago

I think you are confusing $digest with $apply. $apply executes an expression function and then initiates a root.$digest. It really doesn't matter from which scope it is started.

petkov.np Over a year ago

My point is that it is always better to call $digest in the current scope instead of calling it in root, which $apply does.

Collectives™ on Stack Overflow

How to hide a menu using $document.on in angular js

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related