<!DOCTYPE html>
<html>
<head>
<script data-require="angularjs@1.5.3" data-semver="1.5.3" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script data-require="angular-route@*" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular-route.js"></script>
<link data-require="angular-material@*" data-semver="1.1.0-rc2" rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css" />
<script data-require="angular-material@*" data-semver="1.1.0-rc2" src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script>
<script data-require="angular-aria@*" data-semver="1.4.8" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script data-require="angular-animate@*" data-semver="1.5.3" src="https://code.angularjs.org/1.5.3/angular-animate.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-material-icons/0.7.0/angular-material-icons.min.js"></script>
<link rel="stylesheet" href="app.css" />
<script src="app.js"></script>
</head>
<body ng-app="TestApp">
<div layout="column" ng-controller="toolbarCtrl" flex="">
<md-toolbar style="position: fixed;">
<div class="md-toolbar-tools">
<h2>
<span>Test</span>
</h2>
<md-menu id="menu" md-position-mode="target-right target" ng-if="state">
<md-button ng-click="" ng-hide="$mdMedia('min-width: 800px')" aria-label="Menu">
<ng-md-icon icon="menu" style="fill:#fff"></ng-md-icon>
</md-button>
<md-button aria-label=""></md-button>
</md-menu>
</div>
</md-toolbar>
<md-content layout="row" flex="">
<div ng-view="" autoscroll=""></div>
</md-content>
</div>
</body>
</html>
var app = angular.module('TestApp', ['ngRoute', 'ngMaterial', 'ngMdIcons']);
app.config(function($routeProvider){
$routeProvider.when('/form', {
controller: 'mainCtrl',
templateUrl: 'main.html'
})
.otherwise({redirectTo:'/form'});
});
app.service('menuState', function () {
this.mode = true;
});
app.controller('toolbarCtrl', function($scope, $rootScope, menuState) {
$rootScope.$watch('menuState', function (newVal, oldVal) {
console.log('toolbarCtrl', menuState.mode);
$scope.state = menuState.mode;
});
});
app.controller('mainCtrl', function($scope, $rootScope, menuState) {
$scope.showMenu = function(state) {
menuState.mode = state;
console.log('mainCtrl', menuState.mode);
};
});
#page {
margin-top: 80px;
}
<div id="page" layout="row" ng-cloak ng-controller="mainCtrl">
<div layout="column">
<div layout="row" layout-align="end center">
<md-button class="md-primary md-raised" ng-click="showMenu(true)">Show</md-button>
</div>
</div>
<div layout="column">
<md-button class="md-primary md-raised" ng-click="showMenu(false)">Hide</md-button>
</div>
</div>