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 plicated but @Sarhanis made me realize I was asking the wrong question.

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 plicated but @Sarhanis made me realize I was asking the wrong question.

• javascript
• angularjs
• angular-material

3 Answers 3

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); 

});

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.

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 bination of the ordinary class attribute and ngClass. Here's some doco on ngClass: https://docs.angularjs/api/ng/directive/ngClass

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

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