Предложите быстрый обходной путь, чтобы предотвратить закрытие md-меню при нажатии элемента md-menu

Question

Предложите быстрый обходной путь, чтобы предотвратить закрытие md-меню при нажатии элемента md-menu

0

Я пытаюсь предотвратить md-menu от закрытия на md-menu-item щелчком мыши. Я достиг этого с помощью следующего исправления в menuServiceProvider углового материалаServiceProvider.

Изменение строки 286 в https://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(); }

Но искать альтернативу для этого.

Arshad 31 дек. 2015, в 07:25

Источник

Теги:

javascript

angularjs

angular-material

4 ответа

Ещё вопросы

Rizo · Answer 1 · 2018-05-24T10-31-00.000Z

нужно открыть меню после щелчка, вы можете просто попробовать это с помощью щелчка: 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>

Dijo · Answer 2 · 2017-01-21T06-18-00.000Z

Я также столкнулся с такой же проблемой - закрытие пункта меню при триггерах события клика, и я добавил md-prevent-menu-close = "md-prevent-menu-close" внутри моего содержимого меню, где когда-либо использовал ng-click, 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>

Reetu G · Answer 3 · 2016-06-10T05-02-00.000Z

Существует этот атрибут, который вы можете добавить к элементу md-menu-item, заданному угловым js, называемым md-prevent-menu-close который предотвратит закрытие md-menu при любом щелчке элемента. Для получения более подробной информации: https://material.angularjs.org/latest/api/directive/mdMenu

Спасибо.

Arshad · Answer 4 · 2016-01-01T03-04-00.000Z

У меня есть лучшая работа для этой проблемы, так как компонент md-menu ищет клики из элементов, которые имеют один из этих атрибутов ['ng-click', 'ng-href', 'ui-sref'], мы можем создать нашу собственную версию ng-click и использовать ее для любых событий 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>