建议快速解决方法以防止 md-menu 在 md-menu-item 的单击时关闭答案

【问题标题】：Suggest a quick workaround to prevent md-menu from closing on md-menu-item's click建议快速解决方法以防止 md-menu 在 md-menu-item 的单击时关闭
【发布时间】：2015-12-31 06:02:04
【问题描述】：

我试图阻止md-menu 关闭md-menu-item 的点击。我通过 angular material 的menuServiceProvider 中的以下修复实现了它。

更改 https://github.com/angular/material/blob/master/src/components/menu/js/menuServiceProvider.js 中的第 286 行将允许这样做。

if (!target.hasAttribute('disabled') && !target.hasAttribute('md-menu-disable-close') &&
   (!closestMenu || closestMenu == opts.parent[0])) { close(); }

但正在寻找一种替代方法。

【问题讨论】：

标签： javascript angularjs angular-material

【解决方案1】：

点击后需要打开菜单，您可以通过点击简单尝试：md-prevent-menu-close="md-prevent-menu-close"

角度 1.x

<i class="material-icons" 
   ng-click="$ctrl.deleteAlerts(item.MessageNumber)"
   md-prevent-menu-close="md-prevent-menu-close">
   delete
</i>

并且在 angular 2.x 或 angular 6 中

<i class="material-icons" 
       (click)="deleteAlerts(item.MessageNumber)"
       md-prevent-menu-close="md-prevent-menu-close">
       delete
</i>

【讨论】：

【解决方案2】：

我也遇到了同样的问题——点击事件触发时菜单项关闭，我在我使用 ng-click 的菜单内容中添加了 md-prevent-menu-close="md-prevent-menu-close"， ui-sref 等这个问题解决了。下面是示例代码sn-p

<md-menu>
  <md-button class="md-icon-button">
    <i class="material-icons md-notification-badge" >notifications</i>
  </md-button>
    <md-menu-content class="alert-menu" width="6" >
      <md-menu-item  ng-repeat="item in $ctrl.myAlertsNotifications">
        <div><i class="material-icons">{{item.icon}}</i></div>
        <i class="material-icons" ng-click="$ctrl.deleteAlerts(item.MessageNumber);" md-prevent-menu-close="md-prevent-menu-close">delete</i>
      </md-menu-item>
    </md-menu-content>
  </md-menu>

【讨论】：

【解决方案3】：

我为这个问题找到了最好的解决方法，因为 md-menu 组件会查找来自具有以下属性之一的元素的点击 ['ng-click', 'ng-href', 'ui-sref'],我们可以创建自己的 ng-click 版本，并将其用于 md-menu 中的任何点击事件，如下所示：

app.directive('myClick', function ($parse, $rootScope) {
return {
    restrict: 'A',
    compile: function ($element, attrs) {
        var fn = $parse(attrs.myClick, null, true);
        return function myClick(scope, element) {
            element.on('click', function (event) {
                var callback = function () {
                    fn(scope, { $event: event });
                };
                scope.$apply(callback);
            })
        }
    }
}
})

...在 html 中...

<md-menu>
<md-button>Open Menu</md-button>
<md-menu-content>
    <md-button my-click="doSomething()">Click me without closing the menu</button>
</md-menu-content>
</md-menu>

【讨论】：

【解决方案4】：

有这个属性，您可以将其添加到您的md-menu-item 元素中，由称为md-prevent-menu-close 的角度js 给出，这将防止在任何项目点击时关闭md-menu。更多详细信息：https://material.angularjs.org/latest/api/directive/mdMenu

谢谢。

【讨论】：