Apertura del menu del materiale angolare al passaggio del mouse

Question

Uso la barra del menu dei materiali angolari per visualizzare un menu e il sottomenu sotto ciascuna voce di menu. Ho aggiunto evento ng-clic per aprire il sottomenu. Ma il menu si sta ancora aprendo al passaggio del mouse sulla voce di menu principale. Non solo, dato che ho due sottomenu, per il primo elemento del sottomenu, il sottomenu si apre al passaggio del mouse ma il secondo sottomenu non si apre al passaggio del mouse. Come posso fermare l'apertura di questo menu al passaggio del mouse. Ho provato a fermare la propagazione dell'evento su mouseenter sulla voce di menu genitore. Ma al momento dell'apertura del secondo sottomenu il primo sottomenu non viene nascosto. Per favore aiutami a risolverlo.

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

Il mio codice demo esistente è a demo.

Answer 1

è molto semplice qui è una risposta, se si utilizza scrigno di installare angolare-materiale, è necessario:

1. andare a /bower-components/angular-material/modules/js cartella
2. aperta menu.js in qualsiasi editor di prova come codice visivo , sublimi o atomo di
3. andare a trovare questa linea this.handleMenuItemHover = function(event) {

quindi utilizzare il mio 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(); 
}; 

Answer 2

Purtroppo Google non sta riparando molti del materiale angolare 1 problemi, a favore della versione 2.
credo che questo potrebbe essere un modo per incoraggiare le persone a passare alla v2 angolare ...

Comunque - Ho risolto il problema al passaggio del mouse interrompendo la propagazione dell'evento sulla voce di menu. Quindi aggiungendo un gestore di eventi "mouse leave" al contenitore del sottomenu, che chiude il menu corrente.

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>