Question

我正在使用Angular Material菜单栏显示菜单和每个菜单项下的子菜单。我添加了ng-click事件来打开子菜单。但是鼠标悬停在父菜单项上时菜单仍然打开。不仅如此，因为我有两个子菜单，对于第一个子菜单项，子菜单在鼠标悬停时打开，但第二个子菜单在鼠标悬停时不打开。如何在鼠标悬停时停止此菜单打开。我试图在父菜单项上的mouseenter上停止事件传播。但是在打开第二个子菜单时，第一个子菜单没有被隐藏。请帮我解决一下。

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

我现有的演示代码位于demo。

Answer 1

不幸的是，谷歌没有修复许多Angular Material 1问题，而是支持版本2 我认为这可以鼓励人们切换到Angular v2 ......

无论如何 - 我通过停止菜单项上的事件传播解决了悬停问题。然后向子菜单容器添加“鼠标离开”事件处理程序，关闭当前菜单。

控制器 -

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

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

查看 -

<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

这是一个非常简单的答案，如果你使用凉亭安装角度材料，你需要：

转到/bower-components/angular-material/modules/js文件夹
在任何测试编辑器中打开menu.js，例如可视代码，sublime或atom
去查找此行this.handleMenuItemHover = function(event) {

然后使用我的修复：

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();
};

鼠标悬停时开启角度材质菜单

2 个答案: