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!
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 the following dependencies in my project.
{
"dependencies": {
"angular": "^1.6.2",
"angular-animate": "^1.6.2",
"angular-aria": "^1.6.2",
"angular-material": "^1.1.3",
"angular-material-data-table": "^0.10.10",
"angular-resource": "^1.6.2",
"angular-route": "^1.6.2",
"material-design-icons": "^3.0.1"
}
}
I'm using md-menu in one place and it looks like this.
<div layout="column" ng-controller="sidenavCtrl">
<section layout="row" flex>
<md-sidenav
class="md-sidenav-left"
md-is-locked-open="$mdMedia('gt-md')"
md-whiteframe="4"
md-component-id="left">
<md-toolbar>
<div class="md-toolbar-tools">
<h1>CMDB</h1>
<span flex></span>
<md-button ng-click="close()"><i class="material-icons">menu</i></md-button>
</div>
</md-toolbar>
<md-content layout-padding class="md-sidenav-content">
<md-button class="md-primary" hide-gt-md>
Close Sidenav Left
</md-button>
<md-menu>
<md-menu-content>
<md-menu-item>
<a class="md-button" href="#!/" title="Home">Home</a>
</md-menu-item>
<md-menu-item>
<a class="md-button" href="#!/about" title="About">About</a>
</md-menu-item>
</md-menu-content>
</md-menu>
</md-content>
</md-sidenav>
</section>
</div>
I get this error at every page load.
Error: Invalid HTML for md-menu: Expected the menu to contain a `md-menu-content` element.
n#file:///home/stemid/Utveckling/cmdb/webclient/node_modules/angular-material/angular-material.min.js:16:14211
X#file:///home/stemid/Utveckling/cmdb/webclient/node_modules/angular/angular.min.js:73:417
Na#file:///home/stemid/Utveckling/cmdb/webclient/node_modules/angular/angular.min.js:61:176
Na#file:///home/stemid/Utveckling/cmdb/webclient/node_modules/angular/angular.min.js:61:307
Na#file:///home/stemid/Utveckling/cmdb/webclient/node_modules/angular/angular.min.js:61:307
Na#file:///home/stemid/Utveckling/cmdb/webclient/node_modules/angular/angular.min.js:61:307
Na#file:///home/stemid/Utveckling/cmdb/webclient/node_modules/angular/angular.min.js:61:307
Na#file:///home/stemid/Utveckling/cmdb/webclient/node_modules/angular/angular.min.js:61:307
ba#file:///home/stemid/Utveckling/cmdb/webclient/node_modules/angular/angular.min.js:59:87
Mc/c/</<#file:///home/stemid/Utveckling/cmdb/webclient/node_modules/angular/angular.min.js:21:157
If/this.$get</m.prototype.$eval#file:///home/stemid/Utveckling/cmdb/webclient/node_modules/angular/angular.min.js:148:43
If/this.$get</m.prototype.$apply#file:///home/stemid/Utveckling/cmdb/webclient/node_modules/angular/angular.min.js:148:275
Mc/c/<#file:///home/stemid/Utveckling/cmdb/webclient/node_modules/angular/angular.min.js:21:115
h/<.invoke#file:///home/stemid/Utveckling/cmdb/webclient/node_modules/angular/angular.min.js:43:169
Mc/c#file:///home/stemid/Utveckling/cmdb/webclient/node_modules/angular/angular.min.js:21:36
Mc#file:///home/stemid/Utveckling/cmdb/webclient/node_modules/angular/angular.min.js:21:332
qe#file:///home/stemid/Utveckling/cmdb/webclient/node_modules/angular/angular.min.js:20:1
#file:///home/stemid/Utveckling/cmdb/webclient/node_modules/angular/angular.min.js:331:117
b#file:///home/stemid/Utveckling/cmdb/webclient/node_modules/angular/angular.min.js:37:36
<md-menu class="md-menu">
And I just can't figure out why.
I've found some other posts about md-menu but none resembling this issue. My md-menu seems to follow the proposed standard of having two child elements. It's essentially copied from the Angular Material demos but the difference is that I tried to put it inside a sidenav. Which isn't in the demos.
It looks ok for me, and it works in so far that it's a placeholder with two items until I get time to develop it more.
You're missing your button to open the menu.
<md-menu>
<md-button ng-click="vm.openMenu($mdOpenMenu, $event)">
Open Menu
</md-button>
<md-menu-content>
<md-menu-item>
<a class="md-button" href="#!/" title="Home">Home</a>
</md-menu-item>
<md-menu-item>
<a class="md-button" href="#!/about" title="About">About</a>
</md-menu-item>
</md-menu-content>
</md-menu>
You are using nested menus, the inner one is missing the openning button, that is requiered by md-menu and is responsible for the error message. Plus, the button need an ng-click to open the submenu $mdMenu.open($event).
All you need to do is include button of the menu-item in the md-menu. That is how I edited your code:
<md-content layout-padding class="md-sidenav-content">
<md-menu>
<!-- md-button openning the menu needs to be inside of md-menu -->
<md-button class="md-primary" hide-gt-md ng-click="$mdMenu.open($event)">
Close Sidenav Left
</md-button>
<md-menu-content>
<md-menu-item>
<a class="md-button" href="#!/" title="Home">Home</a>
</md-menu-item>
<md-menu-item>
<a class="md-button" href="#!/about" title="About">About</a>
</md-menu-item>
</md-menu-content>
</md-menu>
</md-content>
Details: https://material.angularjs.org/latest/api/directive/mdMenu
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>
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>
I have added angular-material to my meanjs project and was playing with styling first elements. I also made sure every other styles were removed from that project.. so only default angular styles are being loaded.
Now, for example, I created a md-menu in a md-toolbar using this code here:
<md-menu md-position-mode="target-right target">
<md-button aria-label="Open profile actions" ng-click="openMenu($mdOpenMenu, $event)" md-menu-origin>
<img alt="{{authentication.user.displayName}}" class="header-profile-image" data-ng-src="{{authentication.user.profileImageURL}}"/>
<span data-ng-bind="authentication.user.displayName"></span>
</md-button>
<md-menu-content width="4">
<md-menu-item data-ui-sref-active="active">
<md-button data-ui-sref="settings.profile">
<ng-md-icon icon="account_circle"></ng-md-icon>
<span md-menu-align-target>Edit Profile</span>
</md-button>
</md-menu-item>
<md-menu-item data-ui-sref-active="active">
<md-button data-ui-sref="settings.picture">
<ng-md-icon icon="photo" md-menu-align-target></ng-md-icon>
Change Profile Picture
</md-button>
</md-menu-item>
<md-menu-item data-ui-sref-active="active" data-ng-show="authentication.user.provider === 'local'">
<md-button data-ui-sref="settings.password">
<ng-md-icon icon="lock" md-menu-align-target></ng-md-icon>
Change Password
</md-button>
</md-menu-item>
<md-menu-item data-ui-sref-active="active">
<md-button data-ui-sref="settings.accounts">
<ng-md-icon icon="share" md-menu-align-target></ng-md-icon>
Manage Social Accounts
</md-button>
</md-menu-item>
<md-menu-divider></md-menu-divider>
<md-menu-item data-ui-sref-active="active">
<md-button href="/api/auth/signout" target="_self">
<ng-md-icon icon="logout" md-menu-align-target></ng-md-icon>
Signout
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
However this results in a menu with mispositioned texts and icons, even if I delete the icons. They should be vertically centered like you can see here:
https://material.angularjs.org/HEAD/#/demo/material.components.menu
Same problem came up creating a menu icon like this:
<md-button aria-label="Open the sidebar" class="md-icon-button menu" ng-click="toggleSideNav()">
<ng-md-icon icon="menu" style="fill: #fff;" md-menu-align-target></ng-md-icon>
</md-button>
Which results in this here
However.. it's no problem for me to solve this with some css rules.. but I guess the problem must be somewhere else? anybody has an idea? I checked the angular-material documentation a thousand times and can't figure out what's wrong.
thanks!
It's because you're mixing Angular Material with Angular Material Icons (ng-md-icon), two different projects, but the ng-md-icon guys have patched their library to run alongside Angular Material, but you have to use the Angular Material directive md-icon like so:
Instead of:
<ng-md-icon icon="account_circle"></ng-md-icon>
You would use:
<md-icon ng-md-icon icon="account_circle"></md-icon>