My menu is closing after I click on my toggleSharebutton. How can i prevent this. I use angularJS with Angular material
Here is my code:
<md-menu>
<md-button ng-click="$mdOpenMenu()">
</md-button>
<md-menu-content>
<md-menu-item>
<md-button ng-click="toggleShare()">
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
You can use md-prevent-menu-close attribute to stop menu from closing as suggested in offical doc. Here is how you write code
<md-menu>
<md-button ng-click="$mdOpenMenu()">
</md-button>
<md-menu-content>
<md-menu-item>
<md-button ng-click="toggleShare()" md-prevent-menu-close="md-prevent-menu-close">
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
Here is a working example of your desired result using this method.
http://codepen.io/next1/pen/aNadYR
The answer above should be the accepted answer, but you can also use ngMouseup instead of ngClick and it works just the same :)
<md-menu>
<md-button ng-click="$mdOpenMenu()">
</md-button>
<md-menu-content>
<md-menu-item>
<md-button ng-mouseup="toggleShare()">
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
Related
The menu content is partly hidden instead of positioning properly.
<md-menu>
<md-button ng-click="$mdMenu.open($event)">
<div layout="row"><div>Edit</div><md-icon md-menu-origin>more_vert</md-icon></div>
</md-button>
<md-menu-content>
<md-menu-item>
<md-button>Save</md-button>
</md-menu-item>
<md-menu-item>
<md-button>Delete</md-button>
</md-menu-item>
<md-menu-item>
<md-button>Print</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
Now that I see your view, the problem is not the code, the template is ok, the problem is that you are adding this menu in the bottom of the page, and not using the offset option to correct the position of it, try different values for the y axis.
<md-menu md-offset="0 -100">
I have an AngularJS 1.6/Typescript project in which I have a Material Design menu element. Inside the menu element I have a select with multiple options.
If I click open the menu and then click on the select and then outside the select element only the menu container is removed. Since the md-backdrop element for the menu has a higher z-index than the md-backdrop for the select element.
I would like to be able to remove both the menu and the select container with a single click.
https://codepen.io/anon/pen/ELOvJd
<md-menu>
<md-button aria-label="Open phone interactions menu" class="md-icon-button" ng-click="$mdMenu.open();">
qq
</md-button>
<md-menu-content width="4">
<md-menu-item>
<md-button>
yy
</md-button>
</md-menu-item>
<md-menu-item>
<md-button>
zz
</md-button>
</md-menu-item>
<md-menu-divider></md-menu-divider>
<md-menu-item>
<md-button>
xx
</md-button>
</md-menu-item>
<md-input-container>
<label>Status</label>
<md-select ng-model="ctrl.userState">
<md-option><em>None</em></md-option>
<md-option>
Something
</md-option>
<md-option>
Something
</md-option>
<md-option>
Something
</md-option>
<md-option>
Something
</md-option>
</md-select>
</md-input-container>
</md-menu-content>
</md-menu>
Is it required for you to use a select? Why not utilize a second menu?
Example:
https://codepen.io/anon/pen/LmXOOj
<div class="md-menu-demo menudemoBasicUsage" ng-controller="BasicDemoCtrl as ctrl" ng-cloak="" ng-app="MyApp">
<md-menu>
<md-button aria-label="Open phone interactions menu" class="md-icon-button" ng-click="$mdMenu.open();">
qq
</md-button>
<md-menu-content width="4">
<md-menu-item>
<md-button>
yy
</md-button>
</md-menu-item>
<md-menu-item>
<md-button>
zz
</md-button>
</md-menu-item>
<md-menu-item>
<md-button>
xx
</md-button>
</md-menu-item layout="row">
<md-menu>
<md-button aria-label="Open interactions menu" class="md-icon-button" ng-click="$mdMenu.open();">
>>
</md-button>
<md-menu-content width="4">
<md-menu-item>
<md-button>
aa
</md-button>
</md-menu-item>
<md-menu-item>
<md-button>
bb
</md-button>
</md-menu-item>
<md-menu-item>
<md-button>
cc
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
</md-menu-content>
</md-menu>
I've played around a bit and we can listen to the mdMenuClose emitter. And from that point we call the ``$mdSelect.hide()` function to hide the select box when the mdMenu is closed.
https://codepen.io/anon/pen/jxXbrX
$scope.$on('$mdMenuClose', function (event) {
$mdSelect.hide();
});
I have an issue with FAB that seems to initialize open and I can't close it. The menu items also seem to be consuiming space on the line rather than floating over it.
Not sure what I did 'wrong'.
http://codepen.io/ed4becky/pen/eJwYvw
<md-dialog aria-label="Testing FAB in Dialog">
<md-toolbar>
<div class="md-toolbar-tools">
<h2>Testing FAB in Dialog</h2>
<span flex></span>
<md-button class="md-icon-button" ng-click="cancel()">
<md-icon md-svg-src="img/icons/ic_close_24px.svg" aria-label="Close dialog"></md-icon>
</md-button>
</div>
</md-toolbar>
<md-dialog-content style="max-width:800px;max-height:810px; ">
<md-tabs md-dynamic-height md-border-bottom>
<md-tab label="one">
<md-content class="md-padding" style="width:600px;">
<md-fab-speed-dial md-direction="left" ng-class="md-fling" ng-cloak>
<md-fab-trigger>
<md-button aria-label="menu" class="md-fab md-warn md-mini">
X
</md-button>
</md-fab-trigger>
<md-fab-actions>
<md-button aria-label="no" class="md-fab md-raised md-mini md-warn">
No
</md-button>
<md-button aria-label="yes" class="md-fab md-raised md-mini md-accent">
Yes
</md-button>
</md-fab-actions>
</md-fab-speed-dial>
</md-content>
</md-tab>
</md-tabs>
</md-dialog-content>
<md-dialog-actions layout="row">
<md-button ng-click="cancel()" style="margin-right:20px;">
Done
</md-button>
</md-dialog-actions>
</md-dialog>
Here you have a working plunker
Just a few things to keep in mind:
As you post in a comment, update to an up to date angular-material version. Plunker is using the latest 1.1.1 relase
ng-class accepts an expression as parameter, so you should change ng-class="md-fling" per ng-class="'md-fling'" if you don't bind the value to a controller variable.
When you call the $mdDialog.show(...) service, you are setting parent: angular.element(document.body). Not sure if you really need this for your use case, but if you remove it, it works well.
Code, just for reference:
View:
...
<md-fab-speed-dial md-direction="left" ng-class="'md-fling'" ng-cloak>
<md-fab-trigger>
<md-button aria-label="menu" class="md-fab md-warn md-mini">
X
</md-button>
</md-fab-trigger>
<md-fab-actions>
<md-button aria-label="no" class="md-fab md-raised md-mini md-warn">
No
</md-button>
<md-button aria-label="yes" class="md-fab md-raised md-mini md-accent">
Yes
</md-button>
</md-fab-actions>
</md-fab-speed-dial>
...
Controller:
...
$scope.showTabDialog = function(ev) {
$mdDialog.show({
controller: DialogController,
templateUrl: 'tabDialog.tmpl.html',
targetEvent: ev,
clickOutsideToClose:true
});
};
...
Hope it helps
I'm using Angular Material and md-menu. I can run a function by pressing the menu button, but not outside. How to execute a function by clicking outside the menu when the menu is open?
The code:
<md-menu>
<div ng-click="$mdOpenMenu($event);">
<div>
<md-icon md-svg-src="1.svg"></md-icon>
</div>
{{ items }}
</div>
<md-menu-content width="2">
<md-menu-item>
<md-button ng-click="funa()">item1</md-button>
</md-menu-item>
<md-menu-item>
<md-button ng-click="funb()">item2</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
When I click outside the menu, always closed and i can't run another action/function.
Thanks a lot!
I see a sub-menu working in the "menu bar" example - https://material.angularjs.org/latest/demo/menuBar
There are no examples of sub-menus for the actual menu component.
I looked at the menu bar example and it uses md-menu, so it should be supported in the regular menu, right? I tried it and it breaks the entire menu (top level also stops working).
I'm guessing that it's just not supported? I found this discussion, but I'm not sure what to make of it.
Check here, there are sub-menu in this example. version 1.0.5
<md-menu-item>
<md-menu style="padding:0px;">
<md-menu-item>
<!-- ACCOUNT SETTINGS -->
<md-button ng-click="$mdOpenMenu()">
<md-icon md-font-set="md">assignment_ind</md-icon>
Account Settings
</md-button>
</md-menu-item>
<!-- SUBMENU-->
<md-menu-content>
<!-- CHANGE PASSWORD -->
<md-menu-item>
<md-button>
<md-icon md-font-set="md">security</md-icon>
Change Pasword
</md-button>
</md-menu-item>
<!-- DELETE ACCOUNT -->
<md-menu-item>
<md-button>
<md-icon md-font-set="md">delete_forever</md-icon>
Delete Account
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
</md-menu-item>