我正试图阻止md-menu
在单击md-menu-item
时关闭。我已经在角材料的menuServiceProvider
中通过以下固定实现了它。
更改中的行286https://github.com/angular/material/blob/master/src/components/menu/js/menuServiceProvider.js将允许这样做。
if (!target.hasAttribute('disabled') && !target.hasAttribute('md-menu-disable-close') &&
(!closestMenu || closestMenu == opts.parent[0])) { close(); }
但正在寻找替代方案。
点击后需要打开菜单,您可以简单地点击: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>
并且在角度2.x或角度6中
<i class="material-icons"
(click)="deleteAlerts(item.MessageNumber)"
md-prevent-menu-close="md-prevent-menu-close">
delete
</i>
我也面临着同样的问题-点击事件触发时菜单项关闭,我在菜单内容中添加了md prevent-menu close="md prevent-menu close",每当我使用ng点击、ui sref等时,这个问题都得到了解决。下方的示例代码片段
<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>
我为这个问题找到了最好的解决方案,因为md菜单组件从具有以下属性之一的元素中寻找点击['ng-click'、'ng-href'、'ui-sref'],我们可以创建自己版本的ng-click,并将其用于md菜单中的任何点击事件,如下所示:
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>
有一个属性,您可以将其添加到md-menu-item
元素中,该属性由名为md-prevent-menu-close
的angular js给定,它将阻止md-menu
在任何项目的单击时关闭。有关更多详细信息:https://material.angularjs.org/latest/api/directive/mdMenu
谢谢。