Angular Material Menü öffnen auf Maus Hover

Question

Ich benutze Angular Material Menüleiste, um ein Menü und das Untermenü unter jedem Menüpunkt anzuzeigen. Ich habe das ng-click-Ereignis hinzugefügt, um das Untermenü zu öffnen. Aber das Menü öffnet sich weiterhin, wenn Sie mit der Maus über den übergeordneten Menüeintrag fahren. Nicht nur das, da ich zwei Untermenüs für den ersten Untermenüpunkt habe, das Untermenü öffnet sich beim Mouse-Hover, aber das zweite Submenü öffnet sich nicht beim Mouse-Hover. Wie ich dieses Menü stoppen kann, wenn ich mit der Maus rüber gehe. Ich habe versucht, die Ereignisausbreitung in mouseenter auf dem übergeordneten Menüelement zu stoppen. Aber dann, wenn das zweite Untermenü geöffnet wird, wird das erste Untermenü nicht versteckt. Bitte helfen Sie mir, wie ich es beheben kann.

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

Meine vorhandenen Demo-Code ist an demo.

Answer 1

es ist sehr einfach, hier ist eine Antwort, wenn Sie Bower Winkel Material installieren verwenden, müssen Sie:

2. offen menu.js in jedem Testeditor wie visuellen Code zu /bower-components/angular-material/modules/js Ordner gehen , erhaben oder Atom
3. gehen diese Linie meine Verlegenheit zu finden this.handleMenuItemHover = function(event) {

dann verwenden:

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

Leider Google ist zur Festsetzung nicht viele der Winkel Material 1 Fragen, zu Gunsten der Version 2.
Ich denke, dies ein Weg sein könnte, Menschen zu ermutigen, Angular v2 zu wechseln ...

Auf jeden Fall - Ich habe das Hover-Problem gelöst, indem ich die Ereignisweiterleitung auf dem Menüpunkt gestoppt habe. Dann fügen Sie dem Untermenü-Container einen "move leave" -Ereignishandler hinzu, der das aktuelle Menü schließt.

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