Prevent the closure of the md-menu-bar to ng-click

I have a md-menu-bar like this:

<md-menu-bar>
    <md-menu>
        <button ng-click="$mdOpenMenu()">
            <md-menu-content>
                <md-menu-item>
                    <md-button ng-click="doSomething()">...</md-button>
                </md-menu-item>
                <md-menu-item>
                    <md-button ng-click="doSomethingButDoNotClose()">...</md-button>
                </md-menu-item>

        </button>
    </md-menu>
<md-menu-bar>

I need you at the click of md-button with doSomethingButDoNotClose the menu not being closed, how do I proceed?

Answers


Pass the event object to your function like this:

<md-button ng-click="doSomethingButDoNotClose($event)">...</md-button>

...and use it inside of your doSomethingButDoNotClose function:

$scope.doSomethingButDoNotClose = function (event) {
    ...
    event.preventDefault();
}

The preventDefault function stops the default event actions from occurring and (hopefully) will prevent the menu from closing (I haven't tested with md-button though).


Need Your Help