diff --git a/src/components/menu/js/menuServiceProvider.js b/src/components/menu/js/menuServiceProvider.js index a33dd39de40..977677d69c3 100644 --- a/src/components/menu/js/menuServiceProvider.js +++ b/src/components/menu/js/menuServiceProvider.js @@ -318,13 +318,6 @@ function MenuProvider($$interimElementProvider) { } } - opts.menuContentEl[0].addEventListener('click', captureClickListener, true); - - return function cleanupInteraction() { - element.removeClass('_md-clickable'); - opts.menuContentEl.off('keydown'); - opts.menuContentEl[0].removeEventListener('click', captureClickListener, true); - }; } } diff --git a/src/components/menuBar/js/menuItemDirective.js b/src/components/menuBar/js/menuItemDirective.js index dd48e3cff21..ccc8fc4a7e9 100644 --- a/src/components/menuBar/js/menuItemDirective.js +++ b/src/components/menuBar/js/menuItemDirective.js @@ -4,12 +4,14 @@ angular .directive('mdMenuItem', MenuItemDirective); /* @ngInject */ -function MenuItemDirective() { +function MenuItemDirective($mdUtil) { return { require: ['mdMenuItem', '?ngModel'], priority: 210, // ensure that our post link runs after ngAria compile: function(templateEl, templateAttrs) { - if (templateAttrs.type == 'checkbox' || templateAttrs.type == 'radio') { + + // Note: This allows us to show the `check` icon for the md-menu-bar items. + if (isInsideMenuBar() && (templateAttrs.type == 'checkbox' || templateAttrs.type == 'radio')) { var text = templateEl[0].textContent; var buttonEl = angular.element(''); buttonEl.html(text); @@ -24,7 +26,7 @@ function MenuItemDirective() { angular.forEach(['ng-disabled'], moveAttrToButton); } else { - setDefault('role', 'menuitem', templateEl[0].querySelector('md-button,button,a')); + setDefault('role', 'menuitem', templateEl[0].querySelector('md-button, button, a')); } @@ -51,6 +53,10 @@ function MenuItemDirective() { templateEl[0].removeAttribute(attr); } } + + function isInsideMenuBar() { + return !!$mdUtil.getClosest(templateEl, 'md-menu-bar', true); + } }, controller: 'MenuItemController' }; diff --git a/src/components/menuBar/menu-bar.spec.js b/src/components/menuBar/menu-bar.spec.js index 3232a64f9ff..38fb0561c64 100644 --- a/src/components/menuBar/menu-bar.spec.js +++ b/src/components/menuBar/menu-bar.spec.js @@ -342,11 +342,18 @@ describe('material.components.menuBar', function() { function setup(attrs) { attrs = attrs || ''; - var template = 'Test Item' + var template = 'Test Item'; var checkboxMenuItem; inject(function($compile, $rootScope) { - checkboxMenuItem = $compile(template)($rootScope); + // We need to have a `md-menu-bar` as a parent of our menu item, because the menu-item + // is only wrapping and indenting the content if it's inside of a menu bar. + var menuBarMock = angular.element(''); + var itemEl = angular.element(template); + + menuBarMock.append(itemEl); + checkboxMenuItem = $compile(itemEl)($rootScope); + $rootScope.$digest(); }); return checkboxMenuItem; @@ -398,11 +405,18 @@ describe('material.components.menuBar', function() { function setup(attrs) { attrs = attrs || ''; - var template = 'Test Item' + var template = 'Test Item'; var radioMenuItem; inject(function($compile, $rootScope) { - radioMenuItem = $compile(template)($rootScope); + // We need to have a `md-menu-bar` as a parent of our menu item, because the menu-item + // is only wrapping and indenting the content if it's inside of a menu bar. + var menuBarMock = angular.element(''); + var itemEl = angular.element(template); + + menuBarMock.append(itemEl); + radioMenuItem = $compile(itemEl)($rootScope); + $rootScope.$digest(); }); return radioMenuItem;