Otwarcie menu z materiałem kątowym po najechaniu myszą

Question

Używam paska menu Materiał kątowy, aby wyświetlić menu i podmenu pod każdym elementem menu. Dodałem zdarzenie ng-click, aby otworzyć podmenu. Ale menu wciąż otwiera się po najechaniu myszą na element menu rodzica. Nie tylko to, ponieważ mam dwa podmenu, dla pierwszego elementu podmenu, podmenu otwiera się po najechaniu myszą, ale drugie podmenu nie otwiera się po najechaniu myszą. Jak mogę zatrzymać otwarcie tego menu przy użyciu myszy. Próbowałem zatrzymać propagację zdarzeń w mouseenter w pozycji menu nadrzędnego. Ale w momencie otwierania drugiego podmenu pierwsze podmenu nie jest ukrywane. Proszę mi pomóc, jak to naprawić.

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

Moje istniejący kod demo jest w demo.

Answer 1

to jest bardzo proste tutaj jest odpowiedź, jeśli używasz altanę zainstalować kątową-materialny, trzeba:

1. iść do /bower-components/angular-material/modules/js folderze
2. otwarty menu.js w dowolnym edytorze testu takie jak kod wizualny , wzniosłe lub atom
3. go znaleźć tej linii this.handleMenuItemHover = function(event) {

następnie używać mojego poprawkę:

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

Niestety Google nie naprawia wiele kątowego materiału 1 zagadnień, na korzyść wersji 2.
myślę, że to może być sposobem, aby zachęcić ludzi, aby przełączyć się Kątowymi v2 ...

Zresztą - Rozwiązałem problem z najechaniem, zatrzymując propagację zdarzenia w elemencie menu. Następnie dodajemy obsługę zdarzeń "pozostawienie myszy" do kontenera podmenu, który zamyka bieżące 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>