5

Is there an isOpen property (or similar) for the <md-menu> directive in angular-material that one could listen or bind to?

Note: My initial question was a lot longer and overly complicated but @Sarhanis made me realize I was asking the wrong question.

Community
  • 1
  • 1
tao
  • 82,996
  • 16
  • 114
  • 150

3 Answers3

4

Thanks to @Sarhanis, I was able to find out how to bind actions to menu opening and closing events. On opening and closing menus, Angular Material broadcasts $mdMenuOpen, respectively $mdMenuClose events:

$scope.$on('$mdMenuOpen', function(event, menu) { 
    console.log('opening menu...', event, menu); 

});
$scope.$on('$mdMenuClose', function(event, menu) { 
    console.log('closing menu...', event, menu); 

});
Community
  • 1
  • 1
tao
  • 82,996
  • 16
  • 114
  • 150
3

I was struggling with the same scenario, and as I tried your answer, I found out that there is an $mdMenuIsOpen inside the $scope of <md-menu> So using this will not require you to bind into an event.

Louie Almeda
  • 5,366
  • 30
  • 38
  • I knew about `$mdMenuIsOpen`, but the problem with it is (or at least was, when I first asked this question) that it had a slight variable delay in getting updated, having to do with the digest cycle and it felt unreliable. I tried workarounds wrapping my action in a `$timeout` but I still wasn't happy. When using the `$mdMenuOpen` and `$mdMenuClose` events the response always fires instantly. – tao Jun 07 '16 at 12:00
  • How did you use it? I don't experience any delay with the `$mdMenuIsOpen` – Louie Almeda Jun 08 '16 at 01:44
  • I'm accepting this answer as `$mdMenuIsOpen` is indeed the property that stores the opened state of ``. If anyone is interested in listening to the ***events*** that `open`/`close` an ``, see my answer. – tao Nov 19 '16 at 15:07
  • Thanks @AndreiGheorghiu – Louie Almeda Nov 21 '16 at 04:35
0

There's a larger application design problem with your example.

You should avoid all use of jQuery inside your Angular project. By working directly on the DOM, jQuery upsets how Angular is designed to operate.

If you want to add classes and things to HTML elements, you can use a combination of the ordinary class attribute and ngClass. Here's some doco on ngClass: https://docs.angularjs.org/api/ng/directive/ngClass

Showing and hiding elements should be done with either ngShow or ngIf: https://docs.angularjs.org/api/ng/directive/ngShow https://docs.angularjs.org/api/ng/directive/ngIf

They should work off scope variables that you have defined in your controllers.

Sarhanis
  • 1,577
  • 1
  • 12
  • 19
  • This is not a production environment. It's a test, I'm testing functionality, so I added `jQuery` to it so I can bind events to dynamically added elements (as ``) using `.on()`, without having to write 10 times more code in clean javascript, which **I can do** and **I will do** long before moving this to production. Now, how does this answer my question? – tao Feb 29 '16 at 00:31
  • I was trying to be helpful. In my experience, mixing jQuery with Angular leads to the kind of strangeness that you're experiencing. – Sarhanis Feb 29 '16 at 00:35
  • Thank you for both your intention and time. As of now, I am unaware of any incompatibility between `jQuery` and `AngularJS`. Actually, up until recently, AngularJS **included** a light form of `jQuery`. If you ask me, `jQuery`, in itself, is not bad and can help achieve goals faster, writing less code. Especially if you know how to use it. But I am aware of its drawbacks. Now, How can I bind a class to a menu being open in `angular-material`? If possible, native. Thank you. – tao Feb 29 '16 at 00:40
  • It's not that jQuery and Angular are incompatible. It's that using jQuery to add classes and remove elements and respond to clicks will interfere with Angular's standard operation, which expects a static view that reflects the contents of the DOM. jQuery is great, just not in Angular. Read this for more information: http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background – Sarhanis Feb 29 '16 at 00:47
  • I am very keen to read any documentation behind your ***By working directly on the DOM, jQuery upsets how Angular is designed to operate.*** statement. This is a subject that highly interests me. Please elaborate. – tao Feb 29 '16 at 00:48
  • Read this answer: http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background – Sarhanis Feb 29 '16 at 00:48
  • I have. Sarhanis. And, without having read it before, it is exactly what I am doing in this question. I ask if there was a native, AngularJS way of knowing when a `md-menu` is open. Do you happen to know the answer to this question? – tao Feb 29 '16 at 00:59
  • Thank you for making me realize I over complicated both the question and the approach. I'm rewriting the question. – tao Feb 29 '16 at 01:08