<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>md-menu-item with ng-if: true</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
<link rel='stylesheet prefetch' href='https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.0-rc4/angular-material.css'>
<link rel='stylesheet prefetch' href='https://material.angularjs.org/1.1.0-rc4/docs.css'>
</head>
<body>
<div ng-controller="AppController as controller" ng-app="app" layout="column">
<md-menu>
<md-button class="md-raised md-primary" ng-click="$mdOpenMenu($event)">
Import Button
</md-button>
<md-menu-content width="4">
<md-menu-item>
<md-button>
Option 1
</md-button>
</md-menu-item>
<md-menu-item>
<md-button>
Option 2
</md-button>
</md-menu-item>
<md-menu-item ng-if="true">
<md-button keep-width>
Sample Button
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
</div>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/1kohei1/md-menu-item-with-ng-if-true-jrqjRy */
var app = angular.module('app', ['ngMaterial'])
app.controller('AppController', AppController);
function AppController() {
var _this = this;
}
app.directive('keepWidth', function() {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var width = element.prop('offsetWidth');
var otherCss = element.css('cssText');
attrs.$set('style', 'width: ' + width + 'px;' + otherCss);
}
};
});