Ouverture d'un menu de matériau angulaire sur le curseur de la souris

Question

J'utilise la barre de menu Matériau angulaire pour afficher un menu et le sous-menu sous chaque élément de menu. J'ai ajouté un événement ng-click pour ouvrir le sous-menu. Mais le menu est toujours ouvert sur le pointeur de la souris sur l'élément de menu parent. Non seulement cela, comme j'ai deux sous-menus, pour le premier élément de sous-menu, le sous-menu s'ouvre au survol de la souris, mais le deuxième sous-menu ne s'ouvre pas sur le vol stationnaire de la souris. Comment je peux arrêter l'ouverture de ce menu avec la souris. J'ai essayé d'arrêter la propagation d'événement sur mouseenter sur l'élément de menu parent. Mais alors au moment de l'ouverture du deuxième sous-menu, le premier sous-menu n'est pas caché. S'il vous plaît aidez-moi à résoudre le problème.

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

Mon code de démonstration existant est à demo.

Answer 1

il est très simple ici est une réponse, si vous utilisez Bower installer matériau angulaire, vous devez:

1. aller à /bower-components/angular-material/modules/js dossier
2. ouvert menu.js dans un éditeur de test tel que le code visuel , sublime ou atome
3. vont trouver cette ligne this.handleMenuItemHover = function(event) {

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

Malheureusement Google ne fixe pas beaucoup de matériel angulaire 1 questions, en faveur de la version 2.
Je pense que cela pourrait être un moyen d'encourager les gens à passer à v2 angulaire ...

Quoi qu'il en soit - J'ai résolu le problème du survol en arrêtant la propagation de l'événement sur l'élément de menu. Ensuite, en ajoutant un gestionnaire d'événement "mouse leave" au conteneur de sous-menu, cela ferme le menu en cours.

Controller -

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

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

Voir -

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