Angular open hover material menu

Question

I use Angular Material menarar to display the menu and submenu under each menu item. I added the ng-click event to open the submenu. But the menu still opens when you hover over the parent menu item. Not only that, since I have two submenus for the first element of the submenu, the submenu opens when you hover, but the second submenu does not open when you hover. How can I stop this hovering menu open. I tried to stop the event propagation in mouseenter in the parent element. But then during the opening of the second submenu, the first submenu is not hidden. Please help me how to fix this.

<div ng-controller="DemoBasicCtrl as ctrl" ng-cloak="" class="menuBardemoBasicUsage" ng-app="MyApp"> <md-menu-bar> <md-menu> <button ng-click="$mdOpenMenu()"> File </button> <md-menu-content> <md-menu-item> <md-menu> <md-button ng-click="$mdOpenMenu()">New</md-button> <md-menu-content> <md-menu-item><md-button ng-click="ctrl.sampleAction('New Document', $event)">Document</md-button></md-menu-item> </md-menu-content> </md-menu> </md-menu-item> <md-menu-item> <md-menu> <md-button ng-click="$mdOpenMenu()">New</md-button> <md-menu-content> <md-menu-item><md-button ng-click="ctrl.sampleAction('New Document', $event)">Document</md-button></md-menu-item> </md-menu-content> </md-menu> </md-menu-item> </md-menu-content> </md-menu> </md-menu-bar> 

My existing demo code is in the demo .

Answer 1

Unfortunately, Google does not fix many of the problems of Angular Material 1, in favor of version 2.
I think this may be a way to encourage people to switch to Angular v2 ...

In any case - I solved the hover problem by stopping the propagation of the event in the menu item. Then add the "mouse leave" event handler to the submenu container, which closes the current menu.

Controller -

  $scope.noop = function(event){ event.stopImmediatePropagation(); }; $scope.closeSubMenu = function(event){ mdMenu.hide(); } 

View -

 <md-menu-item ng-repeat="item in menu.items" > <md-menu-item> <md-menu> <md-button ng-click="$mdOpenMenu($event)" ng-mouseenter="noop($event)">{{item.title}}</md-button> <md-menu-content ng-mouseleave="closeSubMenu($event)" > <md-menu-item ng-repeat="subitem in item.items"> <md-button ng-click="$location.url(subitem.location)">{{subitem.title}}</md-button> </md-menu-item> </md-menu-content> </md-menu> </md-menu-item> </md-menu-item> 

Answer 2

It is very simple, here is the answer, if you use bower to install the angular material, you need:

• go to the /bower-components/angular-material/modules/js folder
• open menu.js in any test editor such as visual code, sublime or atomic
• find this line this.handleMenuItemHover = function(event) {

then use my fix:

 this.handleMenuItemHover = function(event) { if (self.isAlreadyOpening) return; var nestedMenu = ( event.target.querySelector('md-menu') || $mdUtil.getClosest(event.target, 'MD-MENU') ); openMenuTimeout = $timeout(function() { if (nestedMenu) { nestedMenu = angular.element(nestedMenu).controller('mdMenu'); } if (self.currentlyOpenMenu && self.currentlyOpenMenu != nestedMenu) { var closeTo = self.nestLevel + 1; self.currentlyOpenMenu.close(true, { closeTo: closeTo }); /******* david zhao: fix codes ******/ if (!!nestedMenu) { self.isAlreadyOpening = true; nestedMenu.open(); } } else if (nestedMenu && !nestedMenu.isOpen && nestedMenu.open) { self.isAlreadyOpening = true; nestedMenu.open(); } }, nestedMenu ? 100 : 250); var focusableTarget = event.currentTarget.querySelector('.md-button:not([disabled])'); focusableTarget && focusableTarget.focus(); };